jQuery的事件不觸發（高級）

對於通過AJAX動態添加元素或任何之後的頁面加載，我知道我們必須使用.on像jQuery的事件不觸發（高級）

$(document).on('click', '#dynamically-added-element', function() { 
    // do something 
    console.log('Hello World!'); 
});

我甚至包礦用(function($){})(jQuery);，以確保沒有衝突;並確保一切應按正確的順序運行/加載，我也有$(document).ready(function(){});。

現在原本意味着事件對Page A運行，它工作得很好，但是當我提出和嘗試在具有主容器相同idPage B運行，並具有相同的子html，這是行不通的。

所以我做了一些實驗/測試，兩者都有效。（1）所以我做了什麼，我通過我的瀏覽器的控制檯編寫了完全相同的事件監聽器，只需要console.log，然後單擊目標元素，它就可以工作！（2）在同樣的.js腳本中，我添加了與console.log完全相同的事件偵聽器，但將其封裝在setTimeout(function(){}, 5000);之內，5秒後，我單擊目標元素並且它工作正常！

所以我現在的問題是，爲什麼我的原始代碼不起作用？爲什麼這些測試有效？那麼解決方案是什麼？

另外，我的html元素沒有動態加載，它在頁面加載時加載，通過服務器端PHP生成。

編輯： 此信息可能會有幫助。

在Magento運行
JS腳本被包括在head（這就是爲什麼$(document).ready是非常重要的）。
jquery腳本正在我的自定義腳本之前加載。
頁面A和頁面B位於不同頁面上。
它不是一個ajax生成的元素，也不是js/jquery添加的元素;它生成回發php代碼

（3）我的第三個實驗也適用。但我不希望這是我的解決方案，如果可能的話，也不使用JavaScript內聯onclick。所以我做了什麼，我在php文件中添加了一個全新的腳本塊，其中包含頁面的「部分」，代碼完全相同，並且工作正常。但事情是，我現在有兩個相同的事件監聽器。

因此，現在我有2個相同的事件監聽器（無論另一個不工作 - 僅用於頁面B），1從內部（內部）和1從外部.js文件。

<script type="text/javascript"> 
(function($) { 
    $(document).ready(function() { 
     $(document).on('click', '#the-container a', function(e) { 
      e.preventDefault(); 
      var target = $(this).attr('href'); 
     }); 
    }); 
})(jQuery); 
</script>

來源

2016-12-20 Miguel

u使用jQuery的跡象，在第二美元$ ...查看控制檯錯誤 –

'（函數（$）{}）（jQuery的）;'= ==''jQuery（document）.ready（function（）{}）;' –

@IvanKaraman在我的第一個例子中，我通過控制檯使用'''jQuery'''，因爲我知道''''''' '不起作用。另外，沒有錯誤。 – Miguel

-1

只要寫你document.on應該工作和評論你的的document.ready之外「e.preventDefault（）;」。當我改變它時它在小提琴上工作。

<script type="text/javascript"> 
     $(document).on('click', '#the-container a', function(e) { 
      //e.preventDefault(); 
      var target = $(this).attr('href'); 
     }); 
</script>

來源

2016-12-20 23:25:46

-2

jQuery的事件處理程序被附接到所述元件本身不選擇，如果要實例化的事件處理程序元素前的元素選擇器已被加載，它不是一個監聽附着到任何東西。

例如，這將不起作用：

$.get('http://example.api.com', 
    function(data){ 
     $node = $('<p></p>') 
     $node.text(data) 
     $node.addClass('elementToListen') 
     $('body').append($node) 
    }) 

// this gets executed before the ajax request completes. So no event 
// listener gets attached 

$('.elementToListen').on('click',function(e){'do somthing'})

，因爲任何的元素都被添加到DOM之前的事件監聽器已經成立。

雖然這將工作：

$.get('http://example.api.com', 
    function(data){ 
     $node = $('<p></p>') 
     $node.text(data) 
     $node.addClass('elementToListen') 
     // here it is getting executed after the AJAX request in the 
     // success callback 
     $node.on('click',function(e){'do somthing'}) 
     $('body').append($node) 
    })

在第一exmple

來源

2016-12-20 23:33:52

jQuery的事件不觸發（高級）

回答

相關問題