選擇器單擊加載AJAX的div - jQuery

Question

我正在嘗試創建一個事件，在單擊div-wrapper時，從標記中獲取數據值。 要在document.ready上不存在的元素上綁定事件，我必須使用“on-selector”嗎？

在文檔准備好我的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：“element_text_columns-1”“並讀出數據元素值。

我嘗試使用很多選擇器，但它們似乎都不起作用？ 我有以下內容：

$('.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()使用click事件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警報（測試）。