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

$(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'); 
    }); 
}); 
}); 

Answer 2

您正在爲btnSubmit每次點擊添加btn2，這將創建一個具有相同id多個按鈕，它不使用jQuery acceptible。

使用獨特id或class每一個動態按鈕ADDE，並使用.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'); 
    }); 
    });