Question

当我从输入中添加div值时，我需要单击复选框以使其警报（“已选中”）。我的代码无法正常工作。你可以告诉我我做错了什么。

这是我的代码

HTML：

<div class="container">
    <form>
        <p>Title:</p>
        <input type="text" id="title">
        <p>Link:</p>
        <input type="text" id="link">
    </form>
    <br>
    <button class="btn btn-success">Add</button>
</div>

<div class="content" style="margin-top:50px"></div>

JQuery的：

$(function() {
    $(".btn-success").click(function(){
        var  title_val = $("#title").val();
        var  link_val = $("#link").val();
        $(".content").append('<div class="col-xs-6 col-md-4"><ol class="breadcrumb"><h4>'+title_val+'</h4><input type="checkbox" id="checkbox"></ol><a href="http://'+link_val+'" class="thumbnail"></a></div>');
    });

    $("#checkbox").click(function(){
        if($(this).is(":checked")) {
            alert("Checked");
        }
    });
});

JSfiddle

Answer 1

动态添加复选框。因此，您需要将事件处理程序委托给现有元素，并确保不要提供相同的ID：

$(document).on("click", ".checkbox", function(){
    if($(this).is(":checked")) {
        alert("Checked");
    }
});

将附加功能更改为使用class而不是ID。

$(".content").append('<div class="col-xs-6 col-md-4"><ol class="breadcrumb"><h4>'+title_val+'</h4><input type="checkbox" class="checkbox"></ol><a href="http://'+link_val+'" class="thumbnail"></a></div>');

Answer 2

在复选框上添加Class然后是jquery使用此代码：

$('.chk').live('click',function(){
        if($(this).is(":checked")) {
            alert("Checked");
        }
    })

点击此链接Link

Answer 3

<强> DEMO

$('.content').on('click', "input[type='checkbox']", function () {
    if ($(this).is(":checked")) {
        alert("Checked");
    }
});

Answer 4

＆＃13;

Use this code
$(document).on('click', '#checkbox' , function(){ 
  if($(this).is(":checked")) {
    alert("Checked");
  } 
});

＆＃13;

未选中复选框

4 个答案: