Jquery onclick函數未被調用

Question

我在我的global.js文件中有這個函數，代碼如下：

$("a.dialog-page").click(function(event) {

          event.preventDefault();
          $this = $(this);

          var URL     = $(this).attr('href');
          var dialogbox = document.getElementById('dialog');
          var dialogOptions = {

                        width: 500,
                        height: 200,
                        modal: true,
                        close: function(event, ui){
                            $('#dialog').empty(); 
                       }
          };

    if(dialogbox==null) {
        $this.after("<div id=\"dialog\"></div>");

    }

    jQuery('#dialog').load(URL + " #content").dialog(dialogOptions);

});

我使用以下標記動態生成HTML：

<div id="dynamic-id">
  <a class="dialog-page" href="/test/test.php">Link to test</a>
</div>

以下是來自我的local.js文件的鏈接的單擊觸發器：

  $('#dynamic-id').on('click', 'a.dialog-page', function(event){        
    event.preventDefault;
  });

問題是當點擊鏈接時，它沒有調用（“a.dialog-page”）。點擊事件會加載我的模態窗口。

我該如何解決這個問題？

謝謝干杯

Answer 1

由於#dynamic-id也是動態生成的，因此您需要使用其他靜態父body ：

$('body').on('click', 'a.dialog-page', function(event){        
    event.preventDefault;
});

Answer 2

Element ＃dynamic-id也是動態生成的。

因此，當您綁定元素時，在將事件綁定到DOM時，DOM中不存在元素# vynamic -id 。

要解決此問題，您可以按如下方式使用

$(document).on('click', 'a.dialog-page', function(event){        
    alert("Link clicked");
    event.preventDefault;
});

Answer 3

嘗試這個 -

$('#dynamic-id').on('click', 'a.dialog-page', function(event){        
    event.preventDefault;
    $this = $(this);

          var URL     = $(this).attr('href');
          var dialogbox = document.getElementById('dialog');
          var dialogOptions = {

                        width: 500,
                        height: 200,
                        modal: true,
                        close: function(event, ui){
                            $('#dialog').empty(); 
                       }
          };

    if(dialogbox==null) {
        $this.after("<div id=\"dialog\"></div>");

    }

    jQuery('#dialog').load(URL + " #content").dialog(dialogOptions);
});

不工作的原因 -

$("a.dialog-page").click(function(event) {

和

$('#dynamic-id').on('click', 'a.dialog-page', function(event){   

基本相同。 因此，當您執行第二行時，您將覆蓋之前的onclick事件。 你可以使用其中任何一個，你應該沒問題。 這是小提琴.. http://jsfiddle.net/KytV8/

Answer 4

您只需要定位pageload上存在的元素並使用on（）函數

$('#container').on('click', '.element', function(){ });

你最初嘗試這樣做的方式，點擊監聽器沒有設置，因為它應用時，它找不到它試圖聽​​的元素。

Answer 5

對我來說，看起來你是靜態定義click事件，它永遠不會被A標記觸發，因為它沒有被附加到動態內容，然后在加載動態數據后定義和附加新點擊只會停止事件。 我會改變它，正如Pointy的評論所暗示的那樣：

<div id="dynamic-id">
  <a class="dialog-page" href="/test/test.php">Link to test</a>
</div>

$('#dynamic-id').on('click', 'a.dialog-page', function(event){        
        event.preventDefault();
          $this = $(this);

          var URL     = $(this).attr('href');
          var dialogbox = document.getElementById('dialog');
          var dialogOptions = {

                        width: 500,
                        height: 200,
                        modal: true,
                        close: function(event, ui){
                            $('#dialog').empty(); 
                       }
          };

    if(dialogbox==null) {
        $this.after("<div id=\"dialog\"></div>");

    }

    jQuery('#dialog').load(URL + " #content").dialog(dialogOptions);
  });