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;
  });

问题是当点击链接时，它没有调用（＆＃34; a.dialog-page＆＃34;）。点击事件会加载我的模态窗口。

我该如何解决这个问题？

由于干杯

Answer 1

由于#dynamic-id也是动态生成的，因此您需要使用其他静态父代body：

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

Answer 2

元素 #vynamic-id 也是动态生成的。

因此，当您绑定元素时，在将事件绑定到DOM时，DOM中不存在＃dynamic-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

您只需要定位页面加载中存在的元素并使用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);
  });

Jquery onclick函数未被调用

5 个答案: