點擊後。一個函數被多次調用...爲什麼？

好的朋友。我需要你的想法。該代碼有兩個簡單的操作。點擊後第一個動作添加ADD。第二個動作用任意數字點擊X.現在調用第二個動作。代碼應該只打印一次！什麼工人不讀有幾次呼叫！誰能解釋爲什麼？點擊後。一個函數被多次調用...爲什麼？

我拿着相同的代碼....與另一個HTML代碼與3 DIV 已經存在。代碼工作正常。

var count = 1; 
 
$(document).ready(function() { 
 
    $("#add").on("click", function() { 
 
    $("#items").append('<div><input/><button class="btn_x">X' + count + '</button></div></br>'); 
 
    count++; 
 

 
    $(".btn_x").on("click", function() { 
 
     console.log($(this).html()); 
 
    }) 
 
    }) 
 
})

<script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<button id="add">Add</button> 
 
<div id="items"></div>

來源

2017-05-26 L.Shabtai

我很久沒有使用jquery，但是如果我沒有弄錯，每次都會被調用，它會爲事件添加一個新的回調函數。嘗試一個，而不是：http://api.jquery.com/one/ –

的問題是，您要添加新的事件偵聽器，每次單擊#add。相反，您可以僅監聽父元素上的事件並從子元素捕獲元素。

var count = 1; 
 
$(document).ready(function() { 
 
    $("#add").on("click", function() { 
 
    $("#items").append('<div><input/><button class="btn_x">X' + count + '</button></div></br>'); 
 
    count++; 
 
    }); 
 
    
 
    // Listen to events on the parent element 
 
    $("#items") 
 
    // But only capture events from child elements with .btn_x 
 
    .on("click", ".btn_x", function() { 
 
     console.log($(this).html()); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<button id="add">Add</button> 
 
<div id="items"></div>

你可以認爲它是這樣的：每一個事件發生在一個.btn_x時間，它會告訴#items了。每當#items聽到它，它就可以讓你處理事件，就像直接聽.btn_x一樣。

您的方法存在的問題是您每次點擊#add時，您都在說「你們每個人都是.btn_x's！這是你的新事件處理程序！」。

來源

2017-05-26 18:24:47

雖然他沒有點擊'＃items'元素，他點擊了＃＃添加按鈕。 '＃items'不是這裏的父元素 – taylorc93

@ taylorc93閱讀問題的描述。問題是，當他們點擊「X1」，「X2」等時，他們會得到多個響應。這是因爲'＃add'點擊處理程序添加了不應該在那裏的額外事件處理程序。在'＃items'上處理事件允許它們從* any *'.btn_x'元素捕獲事件，而不直接綁定它。 –

謝謝。答案很好解釋！只需簡短點即可！謝謝！ –

您正在爲每個btn_x項目創建一個偵聽器，而不是僅將偵聽器添加到新創建的項目。嘗試改變類名像btn_1，btn_2等：

var count = 1; 
$(document).ready(function() { 
    $("#add").on("click", function() { 
    var buttonClass = ".btn_" + count; 
    $("#items").append('<div><input/><button class="' + buttonClass + '">X' + count + '</button></div></br>'); 
    count++; 

    $(buttonClass).on("click", function() { 
     console.log($(this).html()); 
    }) 
    }) 
})

來源

2017-05-26 18:24:57 taylorc93

謝謝你試圖回覆。但我不想改變班級。我需要同班同學。 –

我不知道你在問什麼，但是這可能會有所幫助。

var count = 1; 
 
$(document).ready(function() { 
 
    $("#add").on("click", function() { 
 
    $("#items").empty().append('<div><input/><button class="btn_x">X' + count + '</button></div></br>'); 
 
    count++; 
 
    }) 
 
    $(".btn_x").on("click", function() { 
 
    console.log($(this).html()); 
 
    }) 
 
})

<script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<button id="add">Add</button> 
 
<div id="items"></div>

來源

2017-05-26 18:29:38 nicokant

他們不想只有一個項目，他們想要多個項目。這也不能正確處理'.btn_x'綁定。 –

中有＃將或#item的情況下，兩個人通話。你的監聽器函數調用它們兩個。當你只想調用一個時。必須再次檢查您的代碼。我希望你明白我的觀點。

來源

2017-05-26 18:53:35

點擊後。一個函數被多次調用...爲什麼？

回答

相關問題