Question

我有一个jQuery对话框的现有链接，它可以正常工作。但是当我尝试插入一个新的对话框链接时，使用.on（）来选择一个现有的div，该链接不会产生对话框，而只是链接到该页面。

有人可以帮忙说明应该如何做到这一点吗？

以下是代码示例：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>

$(document).ready(function(){

    $("button").click(function(){
        $("<p><a href='a.html' class='mdialog' name='mine' title='mine' >new link</a></p>").insertAfter("button");
    });

    // this works to produce a dialog for an existing link
    $('.mdialog').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href'))
            .dialog({
                resizable: false,
                modal: true,
                autoOpen: false,
                closeOnEscape: true,
                position: 'center',
                title: $link.attr('title'),
                buttons: {
                    "Close": function() {
                      $( this ).dialog( "close" );
                    }
                }
            });

        $link.click(function() {
            $dialog.dialog('open');

            return false;
        });

    });


  $("#mydiv").on("click","a",function(){

      alert("I'm clicked"); // link click is being handled

    // same code as above does not produce a dialog
        $('.mdialog').each(function() {
            var $link = $(this);
            var $dialog = $('<div></div>')
                .load($link.attr('href'))
                .dialog({
                    resizable: false,
                    modal: true,
                    autoOpen: false,
                    closeOnEscape: true,
                    position: 'center',
                    title: $link.attr('title'),
                    buttons: {
                        "Close": function() {
                          $( this ).dialog( "close" );
                        }
                    }
                });

            $link.click(function() {
                $dialog.dialog('open');

                return false;
            });

        });

  });

});

</script>
</head>
<body>

<div id="mydiv">

<p><a href='a.html' class='mdialog' name='mine' title='mine' >existing link</a></p>

<button>Insert a new paragraph with anchor element after this button</button>
</div>

</body>
</html>

a.html只是一个非常简单的信息：

<p>this should be a dialog message!</p>

下面的 EDIT 似乎允许新注入的对话框正常工作。它现在＃1。正如Jamie建议的那样消除了.each循环，＃2。删除$ link.click（）处理程序以打开对话框，＃3。添加event.preventDefault（）以防止实际链接页面而不是对话框：

  $("#mydiv").on("click","a",function(event){
    //alert("I'm clicked"); // link click is being handled

        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href'))
            .dialog({
                resizable: false,
                modal: true,
                autoOpen: false,
                closeOnEscape: true,
                position: 'center',
                title: $link.attr('title'),
                buttons: {
                    "Close": function() {
                      $( this ).dialog( "close" );
                    }
                }
            });

        //$link.click(function() {
            $dialog.dialog('open');

        //  return false;
        //});

event.preventDefault();

}）;

Answer 1

对我来说，你的选择器没有任何问题。

您可能希望删除尾随"

   //Wrong
   <div id='mydiv'">
   //Corrent
   <div id="mydiv">

在这个注释中，虽然没有必要避免混淆，但我会在所有属性上只使用双引号。

修改看到这个Fiddle这将继续工作。现在至于你想要一个对话来处理每一个你不想遍历每一个`$（'。mdialog'）的单元，你要将它添加到新创建的项目中：

//Inside here: $("button").click(function(){ $('<a href="a.html" class="mdialog" name="mine" title="mine" >new link</a>').insertAfter("button"); //Add new dialog }); //Set up the click event for the dialogue. $("#mydiv").on("click",".mdialog",function(){ alert("I'm clicked"); // li return false; });

我从未使用过jQuery UI，但这就是我设置的方式。

如何使用jQuery .on（）来处理新插入的对话框链接的click事件？

1 个答案: