Javascript 未调用Jquery onclick函数

我的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);

});

问题是当点击链接时，它没有调用（“a.dialog-page”）。点击事件将加载我的模式窗口

我如何解决这个问题

谢谢 Cheers

由于

动态id

也是动态生成的，因此需要使用其他静态父项，如

body

：

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

元素#动态id也会动态生成

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

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

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

试试这个-

$('#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);
});

及

---

基本上是一样的。因此，当您执行第二行时，您将覆盖上一个

onclick

事件。你可以用任何一个，你应该很好。这是小提琴

您只需要将pageload上存在的元素作为目标，并使用on（）函数

---

按照您最初尝试的方式，click listener没有设置，因为在应用它时，它找不到它尝试侦听的元素。

在我看来，您似乎是静态定义click事件，而A标记永远不会触发它，因为它没有附加到动态内容，然后在加载动态数据后定义并附加一个新的单击，该单击只会停止事件。我想把它改成这样，波蒂的评论也提到了这一点：

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

$（'#动态id'）。在（'click'，'a.dialog-page'，函数（事件）{
event.preventDefault（）；
$this=$（this）；
var URL=$（this.attr（'href'）；
var dialogbox=document.getElementById（'dialog'）；
变量对话框选项={
宽度：500，
身高：200，
莫代尔：是的，
关闭：功能（事件、用户界面）{
$（'#dialog'）.empty（）；
}
};
如果（dialogbox==null）{
$this.在（“”）之后；
}
jQuery（“#dialog”）.load（URL+“#content”）.dialog（dialogOptions）；
});

所有事件处理程序代码都应该位于调用“单击触发器”的代码中，而不是第一个函数。对于同一个“a.dialog-page”选择器，您有两个单击处理程序！按照@Pointy@Pointy的建议使用一个。点击触发器是什么意思。您是指将代码放在$（'#dynamic id'）中。在（'click'，'a.dialog-page'，function（event）{//code in here}）上；我试过这个，但不起作用。警报不会显示，只会转到test.php页面。您是否同时使用这两个单击事件$（“a.dialog-page”）。单击（函数）$（文档）。在（'click'，'a.dialog-page'，函数）上；如果是，请仅使用第二个。如果这还不是问题所在，请添加一个fiddle链接，以便我们检查。也尝试了此方法，但不幸的是，也不起作用

$('#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){   

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

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