Question

我正在尝试创建一个事件，在单击div-wrapper时，从标记中获取数据值。要绑定document.ready上不存在的元素上的事件，我必须使用＆＃34; on-selector＆＃34;正确？

在准备好文档时，我的HTML是：

<div class="dashboard_container">
  <div class="ab-builder-el el-empty ui-droppable" ordering="-0.5">
    <p>Plaats hier je element</p>
  </div>
</div>

在拖放时，我使用jQuery在上面提到的div下面添加一部分HTML（使用类el-empty）：

 $(document).ready(function(){
 //Initialize variables
    var generatedID = 1;
    var elementName = null;
    //Initialize droppable elements
    dropInit();
    //Draggable 
    $('.ab-nav-element').draggable({
            appendTo: '.scroll-container',
            revert: 'invalid',
            cursor: "move", 
            distance: 50,
            revertDuration: 250,
            helper: 'clone',
            start: function(){
                $('.el-empty').addClass('el-receptive');
                elementName = $(this).data('original-title');
                // console.log("draggable start, elementName: "+elementName);
            },
            stop: function(){
                $('.el-receptive').removeClass('el-receptive');
                elementName = null;
            }
        });



    //Function droppable
    function dropInit () {
        // console.log("droppable start, elementName: "+elementName);
        $('.ab-builder-el').droppable({
        hoverClass : 'ui-hover',
        drop: function() {
            var dropContent = '<div id="'+elementName+'-'+generatedID+'" ordering="0" class="ab-builder-el panel" data-element="'+elementName+'"></div><div class="ab-builder-el el-empty" ordering="0.5"><p>Plaats hier je element</p></div>';
            $(this).after(dropContent);
            var divID = '#'+ $(this).next('.panel').attr('id');
            generatedID++;
            $(divID).load("builder-loader.php",{
                elementName: elementName,
                divID:divID 
            });
            dropInit();
        }
    })};
});

AJAX调用将HTML更改为：

<div class="dashboard_container">
  <div class="ab-builder-el el-empty ui-droppable" ordering="-0.5">
    <p>Plaats hier je element</p>
  </div>
  <div id="element_text_columns-1" ordering="0" class="ab-builder-el panel ui-droppable" data-element="element_text_columns"><div class="row" background-color:default_background_color;"="">
  <div class="ab-builder-el el-empty ui-droppable" ordering="0.5">
    <p>Plaats hier je element</p>
  </div>
</div>

我喜欢做的是选择带ID的div：＆＃34; element_text_columns-1＆＃34;＆＃34;并读出数据元素值。

我尝试使用很多选择器，但它们似乎都没有用？我有以下内容：

$('.dashboard_container').children('.panel').on("click", function(){
    console.log('children');
    var clickedElement = $(this).data('element');
    if(typeof clickedElement != 'undefined'){console.log(clickedElement);}
});

但这似乎根本不起作用。有什么方法可以定位div？

Answer 1

尽管使用on()，您必须在动态创建的DOM元素上重新绑定事件。假设您有一个容器<div id="foo"></div>。

$（element）.on（'click'，fn）不会影响动态创建的元素

这将警告'bar'，因为它在添加元素后绑定。（JSFiddle）

var panel = $('<div class="panel">foo</div>');
$('#foo').append(panel);

$('.panel').on('click', function(){
    alert('bar');
});

这不会提醒任何事情，因为你绑定了事件，然后添加了元素。（JSFiddle）

$('.panel').on('click', function(){
    alert('bar');
});

var panel = $('<div class="panel">foo</div>');
$('#foo').append(panel);

$（document）.on（'click'，element，fn）影响动态创建的元素

因此，每次添加新元素时都必须重新绑定事件。如果性能无关紧要，可以使用其他语法，这样就不需要重新绑定它们了。（JSFiddle）

$(document).on('click', '.panel', function(){
    alert('bar');
});

var panel = $('<div class="panel">foo</div>');
$('#foo').append(panel);

最简单的解决问题

$(document).on('click', '.dashboard_container .panel', function(){
    var clickedElement = $(this).data('element');
    if(typeof clickedElement != 'undefined'){console.log(clickedElement);}
});

注意：文档只能替换为父div。这是有效的，因为click事件是绑定在现有的父div上，每次单击该元素时都会检查给定的选择器。这也是为什么表现更差的原因。

Answer 2

您必须使用点击事件on()，因为要选择的标记是使用js动态生成的（例如评论中提到的 Satpal ），然后是$(this).data( "element")之类的简单选择器

$('.dashboard_container').on("click", '.panel', function(){
    alert($(this).data( "element"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dashboard_container">
  <div class="ab-builder-el el-empty ui-droppable" ordering="-0.5">
    <p>Plaats hier je element</p>
  </div>
  <div id="element_text_columns-1" ordering="0" class="ab-builder-el panel ui-droppable" data-element="element_text_columns"><div class="row" background-color:default_background_color;"="">
  <div class="ab-builder-el el-empty ui-droppable" ordering="0.5">
    <p>Plaats hier je element</p>
  </div>
</div>

注意：您在ajax生成的HTML中有格式错误的标记：

<div class="row" background-color:default_background_color;"="">

你必须解决它。

希望这有帮助。

Answer 3

你这么说：

单击 div-wrapper ，从标记中获取数据值

所以，我认为你想要的是将click事件分配给包装器，然后获取其后代的值。为此，我们使用：

        $('.dashboard_container').click(function(){
            var data = $(this).find('.panel').data('element');
            alert(data);
        });

为了证明上面的代码适用于动态HTML，我在这里发布了经过测试的代码。

<强> HTML

<div id="foo"></div>

<强>的Javascript

    $(function(){
        $('#foo').click(function(){
            var className = $(this).find('.panel').data('element');
            alert(className);
        });

        var panel = $('<div class="panel" data-element="test">foo</div>');
        $('#foo').append(panel);
    });

结果：点击div后，我收到data-element警告（测试）。

选择器单击加载AJAX的div - jQuery

3 个答案:

$（element）.on（'click'，fn）不会影响动态创建的元素

$（document）.on（'click'，element，fn）影响动态创建的元素

最简单的解决问题