0

正常に機能する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>

以下の編集により、新しく挿入されたダイアログが正しく機能するように見えます。今それは＃1です。ジェイミーが提案したように、.eachループを排除します。$ 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();

}）;

4

1 に答える 1

0

私にとって、セレクターには何の問題もありません。

末尾を削除することをお勧めします"

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

この点については、混乱を避けるために必要ではありませんが、すべての属性に二重引用符のみを使用します。

編集 このフィドルを参照してくださいこれは動作し始めます。ここで、ダイアログをすべてのシングルで機能させたい場合は、すべての `$（'。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;
 });

私はjQueryUIを使用したことがありませんが、これが設定方法です。

于 2013-03-19T14:38:24.650 に答える