未调用 Jquery onclick 函数答案

【问题标题】：Jquery onclick function not being called未调用 Jquery onclick 函数
【发布时间】：2014-05-02 18:07:15
【问题描述】：

我的 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").click 事件，它会加载我的模态窗口。

我该如何解决这个问题？

谢谢干杯

【问题讨论】：

您所有的事件处理程序代码都应该在您调用“点击触发器”而不是第一个函数的代码中。
对于同一个“a.dialog-page”选择器，您有 2 个点击处理程序！只需按照@Pointy 的建议使用一个。
@Pointy 点击触发器是什么意思。你是指把代码放在 $('#dynamic-id').on('click', 'a.dialog-page', function(event){ // code in here });

标签： javascript jquery binding onclick

【解决方案1】：

由于#dynamic-id也是动态生成的，所以需要使用其他静态父类，比如body：

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

【讨论】：

也试过了，不幸的是，也没有用

【解决方案2】：

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

因此，当您绑定元素时，元素 #dynamic-id 在您将事件绑定到它时不存在于 DOM 中。

要解决此问题，您可以使用以下方法

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

【讨论】：

我试过这个，但它不起作用。警报没有显示，它只是转到 test.php 页面
您是否同时使用了两个点击事件？ $("a.dialog-page").click(function) $(document).on('click', 'a.dialog-page', function);如果是，请仅使用第二个
如果这仍然不是问题，您能否添加一个小提琴链接以便我们检查？

【解决方案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/

【讨论】：

【解决方案4】：

您只需要定位页面加载中存在的元素并使用 on() 函数

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

按照您最初尝试的方式，未设置点击侦听器，因为在应用它时，它找不到它尝试侦听的元素。

【讨论】：

【解决方案5】：

在我看来，您似乎是在静态定义点击事件，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);
  });

【讨论】：