在jquery中附加复选框元素后单击不工作

On click not working after appending checkbox elements in jquery

本文关键字：单击 工作 元素 复选框 jquery      更新时间：2023-09-26

contact_containerdiv包含contact子项，这些子项中有一个复选框。我使用ajax将这些子项附加到容器中。一旦我附加html并单击子项复选框。.click无法识别新添加的复选框，只有子项才能处理页面加载。下面是我的HTML和Jquery的工作示例。

你能提供一个解决方案，让附加的复选框在点击时被选中吗？感谢

这是我的HTML标记：

   <div id="contact_container">
    <div class="contact">
        <div class="contact_checkbox">
             <div class="checkbox_container">
                 <div class="checkbox">
                     <input class="testing_checkbox" type="checkbox" name="contacts[]" value="bf6b0049059ec8998601f8fe20acb68ecafe2d44">
                </div>
             </div>
        </div>
        <div class="contact_info">
            <div class="contact_image">
                <img src="image.jpg" width="50" height="50" alt="Profile Picture">
            </div>
            <div class="contact_name"><span>Caroline Airey</span>
            </div>
       </div>
    </div>
</div>
<div id="x_message" class="inputdata" style="overflow: hidden; display: none;">
    <label>Message:</label>
    <span><textarea name="x_message" placeholder="Enter a message to send to your contact(s)"></textarea></span>
    <div class="clear"></div>
    <button class="form_button">Add Contact to Network</button>
</div>

这是我的Jquery：

$( ".checkbox" ).click(function() {
    var checked = $('.testing_checkbox:checked').length;
    $('#testing').val(checked);
    if (checked > 0){
        $('#x_message').show(1000);
    }
    else{
        $('#x_message').hide(1000);
    }
});

您将需要Parent引用来将元素正确绑定到jquery，请尝试此

$(parentObj).on("click",".checkbox",function() {
var checked = $('.testing_checkbox:checked').length;
$('#testing').val(checked);
if (checked > 0){
    $('#x_message').show(1000);
}
else{
    $('#x_message').hide(1000);
}
});

parentObj是div或html元素，您已使用ajax调用

将其附加到html代码中

使用这个jQuery方法：

$(".checkbox").on("click", function()
{
    // Your code here
});

这将从页面初始加载后动态添加到页面的元素中获取点击：）

相关文章：