ตั้งค่าเหตุการณ์ onclick เป็นปุ่มเพิ่มแบบไดนามิกหรือไม่

เพื่อให้ Listener สามารถเพิ่มลงในปุ่มที่เพิ่มเข้ามาโดยทางโปรแกรม เราจำเป็นต้องแนบ Listener เข้ากับปุ่มพาเรนต์ แทนที่จะแนบตัวปุ่มเอง

สมมติว่า HTML มีลักษณะดังนี้:

<div id="buttons">

  <button class="btn">
    Existing button
  </button>

</div>

เราสามารถใช้วิธี .on ของ jQuery กับการมอบหมายกิจกรรม

นี่คือการใช้เมธอด .on โดยไม่มีการมอบสิทธิ์ แต่ใช้ไม่ได้:

$('.btn').on('click', handleClick); // don't use this, it won't work

นี่คือการใช้เมธอด .on กับการมอบสิทธิ์ ซึ่งทำงานได้:

$('#buttons').on('click', '.btn', handleClick);

เพื่อให้สิ่งนี้ทำงานได้ จำเป็นต้องมีองค์ประกอบหลักทั่วไปสำหรับปุ่มดั้งเดิมและปุ่มที่คุณจะเพิ่ม ตามเอกสาร:

กิจกรรมที่ได้รับมอบสิทธิ์มีข้อได้เปรียบตรงที่สามารถประมวลผลเหตุการณ์จากองค์ประกอบสืบทอดที่เพิ่มลงในเอกสารในภายหลังได้ ด้วยการเลือกองค์ประกอบที่รับประกันว่าจะมีอยู่ ณ เวลาที่แนบตัวจัดการเหตุการณ์ที่ได้รับมอบหมาย คุณสามารถใช้เหตุการณ์ที่ได้รับมอบหมายเพื่อหลีกเลี่ยงความจำเป็นในการแนบและลบตัวจัดการเหตุการณ์บ่อยครั้ง

ในตัวอย่างของฉัน ปุ่มใหม่จะถูกเพิ่มลงในองค์ประกอบหลัก #buttons โดยทางโปรแกรมหลังจากหมดเวลา 2 วินาที และตัวจัดการการคลิกจะยังคงแนบอยู่เนื่องจาก #buttons อยู่ที่นั่นในการโหลดหน้าเว็บ

เมื่อเราแนบตัวจัดการการคลิกเข้ากับปุ่มต่างๆ เราจะไม่สามารถแนบตัวจัดการการคลิกเข้ากับปุ่มที่ยังไม่มีได้ แต่ถ้าเราแนบไปกับปุ่มแม่ของปุ่มที่มีอยู่ตั้งแต่เริ่มต้น เมื่อมีการเพิ่มปุ่มใหม่ จะมีผู้ฟังคลิกแนบมาด้วย:

var $buttons = $('#buttons');

var handleClick = function () {
  alert('Button click works!');
};

// Works for new buttons (uses event delegation)
$buttons.on('click', '.btn', handleClick);


// Add a new button after 2 seconds
setTimeout(function () {
  var $newButton = $('<button />');

  $newButton
    .addClass('btn')
    .text('New button');

  $buttons.append($newButton);
}, 2000);

หากคุณต้องการรหัสการซื้อ คุณสามารถจัดเก็บไว้ในแอตทริบิวต์ข้อมูลดังนี้:

  <button class="btn" data-purchase="purchase_01">
    Existing button
  </button>

จากนั้นใน JavaScript คุณสามารถเข้าถึงได้เช่นนี้ในตัวจัดการ:

var handleClick = function () {
  var purchaseId = $(this).data('purchase');

  alert('Button click works! \n\n' + purchaseId);
};

ดูการสาธิตการทำงานที่คุณสามารถสลับการมอบหมายกิจกรรมได้ที่นี่: http://codepen.io/tinacious/pen/MbQJWX?editors=1010

var button = document.createElement('button')

button.addEventListener('click', function(event) {
 ... your code here ...
})

someContainerElement.appendChild(button)

ชื่อวิธีการอธิบายสิ่งที่เกิดขึ้นได้ค่อนข้างมาก แต่จะชัดเจน:

ขั้นแรก สร้างแท็ก button และกำหนดให้กับตัวแปร button

var button = document.createElement('button')

เพิ่มผู้ฟังเหตุการณ์ให้กับองค์ประกอบ button มันจะรับฟังเหตุการณ์ click และเริ่มการทำงานของฟังก์ชัน

button.addEventListener('click', function(event) {
  ... your code here ...
})

จากนั้นเติม button ของคุณต่อท้าย someContainerElement ซึ่งหมายความว่า button ของคุณจะถูกวางไว้ภายในองค์ประกอบหลักนี้

someContainerElement.appendChild(button)