Question

我有一个动态添加的按钮

    <button id="btnSubmit">Button 1</button>

    $(document).ready(function(){
    $('#btnSubmit').on('click', function(){
        alert('Button 1');
        var button2 = '<button id="btn2" >Button 2</button>';
        $('#btnSubmit').after('<p></p>' + button2);
    });

    $(document).on('#btn2', 'click', function(){
        alert('Button2 clicked');
    });
  });

现在，当我点击＃btn2时，未检测到该事件。如何解决这个问题？

Answer 1

您为btn2的每次点击添加btnSubmit，这将创建多个具有相同id的按钮，并且无法通过jQuery加入。

为每个动态按钮添加使用唯一id或class，并使用.on()将点击事件绑定到按钮，请参阅下面的代码

HTML

 <button id="btnSubmit">Button 1</button>

的jQuery

$(document).ready(function(){
    $('#btnSubmit').on('click', function(){
        alert('Button 1');
        var button2 = '<button class="btn2" >Button 2</button>';
        $('#btnSubmit').after('<p></p>' + button2);
    });

    $(document).on('click','.btn2', function(){
        alert('Button2 clicked');
    });
  });

Answer 2

$(document).ready(function(){
$('#btnSubmit').on('click', function(){
    alert('Button 1');
    var button2 = '<button id="btn2" >Button 2</button>';
    $('#btnSubmit').after('<p></p>' + button2);
    $(document).bind('#btn2', 'click', function(){
    alert('Button2 clicked');
    });
});
});

试试这段代码它会起作用。或者你也可以试试这个。

 $(document).ready(function(){
 $('#btnSubmit').on('click', function(){
    alert('Button 1');
    var button2 = '<button id="btn2" >Button 2</button>';
    $('#btnSubmit').after('<p></p>' + button2);
    $('#btn2').live('click', function(){
    alert('Button2 clicked');
    });
});
});

检测动态添加的元素jQuery

2 个答案: