Newly selected element How do I resolve the problem that the previously selected element also changes its value?

If you click the buttons inside several li, a pop-up window appears, and if you change the value of the input in the pop-up window, The value of input, the previous element of the button in li, was changed by that value. After that, if you press the button of the other li element, the value changes as shown in the root above The input value of the previously selected li is also changed I'd like to make a separate change, what should I do? ㅜ<

<li class="">
    <input type="checkbox ">
    <label>
    <span><input type="text" value = "1" class="ff">dog</i></span>
    <img class="modal_open">
    </label>
</li>
<li class="">
    <input type="checkbox ">
    <label>
    <span><input type="text" value = "1" class="ff">dog</i></span>
    <img class="modal_open">
    </label>
</li>

$('li .modal_open').click(function(){
    $('.modal_bg').css('display','block');
    $('.content_area').css('display','block');
    var pp = $(this).prev('span');
    var cla = pp.find('input');

    $('.btn').click(function(){
        var num = $('#num_modal').val();    

        $('.modal_bg').css('display','none');
        $('.content_area').css('display','none');

        cla.val(num);
    });
});

jquery

2022-09-21 17:03

1 Answers

It's not a problem with selecting

In the click event, It's probably because you're calling another click event without canceling the event.

Each click will have a new click event...

Maybe it won't change if you click first or second I think it will continue to change to the same value after that.

I can only guess because I can't see the modal markup If you roughly fix it as it works event not to lose out as follows?

var cla = null;
$('li .modal_open').click(function(){
    $('.modal_bg').css('display','block');
    $('.content_area').css('display','block');
    var pp = $(this).prev('span');
    cla = pp.find('input');
});
$('.btn').click(function(){
    var num = $('#num_modal').val();    

    $('.modal_bg').css('display','none');
    $('.content_area').css('display','none');

    if (cla) {
        cla.val(num);
    }
});

; but ... it will be below :

$('li .modal_open').click(function(){
    $('.modal_bg').css('display','block');
    $('.content_area').css('display','block');
    var pp = $(this).prev('span');
    var cla = pp.find('input');

    $('.btn').click(function(){
        var num = $('#num_modal').val();    

        $('.modal_bg').css('display','none');
        $('.content_area').css('display','none');

        cla.val(num);

        $('.btn').off('click');
    });
});

Both methods are somewhat clumsy.

2022-09-21 17:03

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656