javascript - Questions pointed to by jQuery this

Question

Requirements:
A list, each column has a "Modify" button. After clicking the modify button, a textarea can pop up to fill in the content and save it to the corresponding list
Question:
If you use a loop Each time the modified content of the second list is saved, the modified content of the previous list will be overwritten.
Code: html

<ul>
    <li><p>添加备注</p><span style="color: red">修改</span></li>
    <li><p>添加备注</p><span style="color: red">修改</span></li>
    <li><p>添加备注</p><span style="color: red">修改</span></li>
</ul>
<p id="mask" style="display: none;"></p>
<p id="edit" style="display: none; border: 1px solid blue;">
    <textarea name="" id="" cols="30" rows="10" class="text"></textarea>
    <input type="button" value="sure" class="sure">
    <input type="button" value="close" class="close">
</p>

jQuery, method-1

$('li').on('click', 'span', function() {
    var me = $(this);
    $('#mask').show();
    $('#edit').show();
    $('.text').val('');
    $('.sure').on('click', function() {
        $('#mask').hide();
        $('#edit').hide();
        var text = $('.text').val();
        // 这里如果 find('p')，会把之前修改过的P的text也替换了,目前我的替代方法就是去掉 find('p')
        me.parent().find('p').html( text + '<span style="color: red">修改</span>' ); 
    });
});

Method 2: Loop processing, it will also overwrite the previous modified content

$('li').each(function(index) {
    alert(index)
    $(this).find('span').on('click', function() {
        var me = $(this);
        $('#mask').show();
        $('#edit').show();
        $('.text').val('');
        $('.sure').on('click', function() {
            $('#mask').hide();
            $('#edit').hide();
            var text = $('.text').val();
            me.parent().find('p').html( text );
            // alert(index)
        });
    });
});

I have been struggling with this problem for a long time. Although I have found an alternative, I feel that this solution is not very good. If the html is changed later, it will not work. But use each to loop through the index index value, and then this I have another problem. I have tried various methods over and over but nothing works. I really don’t know where I went wrong.
I hope someone can give me some pointers. Thank you everyone

Answer 1

var me;
$('li').on('click', 'span', function() {
    me = $(this);
    $('#mask').show();
    $('#edit').show();
    $('.text').val('');
});
$('.sure').on('click', function() {
    $('#mask').hide();
    $('#edit').hide();
    var text = $('.text').val();
    me.parent().find('p').html( text + '<span style="color: red">修改</span>' );
});

Just change it to this.

or

$('li').on('click', 'span', function() {
    var me = $(this);
    $('#mask').show();
    $('#edit').show();
    $('.text').val('');
    $('.sure').off('click');
    $('.sure').on('click', function() {
        $('#mask').hide();
        $('#edit').hide();
        var text = $('.text').val();
        me.parent().find('p').html( text + '<span style="color: red">修改</span>' ); 
    });
});

Because you put the on event of the .sure element in the click event of li span, which means that every time you click span, a listening event will be added to .sure, so every point One more time to respond.

Answer 2

There are problems with both pieces of code.

If you bind another click in one click event, then this event will be bound repeatedly every time the button is clicked.

One of the simplest but inefficient solutions is to unbind the button after the pop-up is closed.

$('.sure').off('click');

https://jsfiddle.net/gLfsa02b/

Answer 3

I almost got you into trouble... This is not a problem with this, but because every time you click span, an event is bound to .sure, so when you click .sure later, n is triggered events, including previous ones. So the effect you see is that the previous ones are also overwritten.

var me;

$("li").on("click", "span", function() {
    me = $(this);
    $("#mask").show();
    $("#edit").show();
    $(".text").val("");
});

$(".sure").on("click", function() {
    if (!me) {
        return;
    }

    $("#mask").hide();
    $("#edit").hide();
    var text = $(".text").val();
    me.parent().find("p").html(text + '<span style="color: red">修改</span>');
});

https://jsfiddle.net/v5hnhfam/

Answer 4

Thank you to the brothers upstairs for answering my questions during the Dragon Boat Festival holiday. Thank you very much. Every answer gives me a lot of inspiration. Thank you! ! !
But I can only accept one answer. I took a look at the reputations of several brothers and I adopted Oh Le’s answer. Thanks!