Question

我有三个不同的div，div 1，div 2和div 3。

第1步：我将在div 1中显示几个预定义数量的按钮，单击这些按钮时，会将动态内容填充到div 2中。

第2步：此动态HTML内容包含几个随机数量的按钮，单击这些按钮时，应在div 3中显示各自的内容。

我正在使用字符串模板4来填充这些html文件。所以我有办法将必要的信息放到页面中，并通过唯一标识符识别每个按钮。由于步骤1处理预定数量的按钮，因此我为每个按钮定义了单独的操作，并且我能够显示其各自的动态内容。但是，为了识别2级按钮单击操作，我将它们与公共类名称组合在一起，例如：＆＃34; dynamicbuttons＆＃34;。

但是我无法注册动作以在div 3中显示任何类型的内容。

这是我的jQuery示例代码：

$(document).ready(function() {
    $('#button1A').on("click", function(event) {
        $('#div2').html("<p> This is normal div 2</p><br><input type='button' id='button2' class='dynamicbuttons' value='Button 2'>");
        $('#div2').show();
    });
    $('#button1B').on("click", function(event) {
        $('#div2').html("<p> This is heavily populated div 2</p><br><input type='button' id='button2A' class='dynamicbuttons' value='Button 2A'><br><br><br><input type='button' id='button2B' class='dynamicbuttons' value='Button 2B'>");
        $('#div2').show();
    });
    $('.dynamicbuttons').on("click", function(event) {
        $('#div3').html("<p> This is div 3</p>");
        $('#div3').show();
    });
});

我在这里创建了一个jsfiddle：https://jsfiddle.net/2waL6m51/

有人可以向我提供有关如何解决此问题的任何指示吗？

Answer 1

您需要使用委托。你已经动态创建了元素，你不能只为这些按钮创建监听器。你必须使用父div听。

查看我为解释而构建的Fiddle：

<p>This is to demonstrate how to use delegation to make dynamically created buttons (or any dynamically created element) respond to an event handler.</p>

请注意，为了做到这一点，必须有一些使用DOM加载的元素，以便侦听器可以在其中找到子元素。

在这种情况下，我们使用id为“inside_div”的div作为预加载元素，然后在单击按钮1时动态地将该按钮添加到该div。

按钮1

现在jQuery：

    //Standard event listener for button1
$('#button1').click(function () {    
    var btn_txt = "<br><button id='button2'>Button 2</button>";
    $('#inside_div').append(btn_txt);

});

//Note that a standard event listener will not work on Button 2 because
//it was created dynamically and so the event listener cannot find it.
//$('#button2').click(function(){
//  alert('button2 event');
//});


//Delegated event listener
//Note that we're referencing the element that loaded with the DOM ('#inside_div')
//Also note that insted of using a click event, we use .on() and then specificy 'click' inside of it.
//Because #inside_div already exists, we can then locate the 
//dynamically created child element inside of it.

$('#inside_div').on('click', '#button2', function () {    
    var i = 3;
    while (i <= 5) {
        var btn_txt = "<br><br><button class='test_class' id='button" + i + "' >Button " + i + "</button>";
        $('#inside_div').append(btn_txt);
        i++;
    }
});

//This is to demonstrate a listener that works on multiple elements with the same class.
$('#inside_div').on('click', '.test_class', function () {
    alert('Class Alert');
});

使用jQuery

1 个答案: