動態插入的按鈕不響應'onclick'

我無法讓我的按鈕響應點擊。我生成使用HTML（）方法，此按鈕：動態插入的按鈕不響應'onclick'

var button1 = '<button class="btn btn-default" id="button1">Back</button>'; 
$(".component").html(button1);

此按鈕在屏幕上呈現，但不工作，當我點擊沒有任何反應。

$("#button1 ").on('click',function(e){ 
     console.log("clicked"); 
});

手工插入的相同的html代碼（硬編碼）工作正常。

來源

2017-07-18 jarosik

你的jquery選擇器的id有一個空格。嘗試下面的代碼。 '$（document）.on（'click'，'＃button1'，function（e）{' 'console.log（「clicked」）;' '} –

@PankajMakwana空間不相關 –

可能重複[動態創建的元素上的事件綁定？]（https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements） –

您應該將事件委託給DOM加載後創建的元素。

$(document).on('click','#button1',function(e){ 
     console.log("clicked"); 
}

來源

2017-07-18 13:53:33

這是因爲當瀏覽器讀取頁面時，jquery會綁定您的點擊事件。當你動態地插入你的按鈕時，它沒有綁定事件。

您應該在注入按鈕的代碼之後放置綁定click事件的代碼。或者將關於click事件的代碼放入函數中，並在每次新注入的按鈕需要處理click事件時調用它。

來源

2017-07-18 13:54:12 ksjohn

您可能需要委託事件處理程序，但在這種情況下，只需使用jQuery創建元素即可解決問題並且看起來更好。

var button1 = $('<button />', { 
 
    'class' : 'btn btn-default', 
 
    id  : 'button1', 
 
    text : 'Back', 
 
    on  : { 
 
    click : function() { 
 
     console.log('clicked'); 
 
    } 
 
    } 
 
}); 
 

 
$(".component").html(button1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="component"></div>

來源

2017-07-18 13:55:02 adeneo

「看起來更好」 - 這一定是主觀的，因爲你的版本對我來說看起來很討厭 –

@ freedomn-m - 對我來說，這看起來不錯，比將HTML字符串傳遞給'$（）'，並且比將單個元素的事件委託給父項好得多。 – adeneo

你在你的代碼的一些錯誤。

您BUTTON1這裏

$("#button1 ")

後有空間，你以後onclick功能中省略);。

還有誰完美運行

var button1 = '<button id="button1">Back</button>'; 
 
$(".component").append(button1); 
 
$("#button1").on('click', function() { 
 
    alert("clicked"); 
 
});

.component { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: solid 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="component"> 
 

 
</div>

一個代碼，並更好地使用.append()不.html()因爲.html()覆蓋容器的整個HTML內容。

來源

2017-07-18 14:03:28

動態插入的按鈕不響應'onclick'

回答

相關問題