Как использовать jQuery .on() для обработки события click для недавно вставленной диалоговой ссылки?

У меня есть существующая ссылка на диалог jQuery, который работает так, как должен. Но когда я пытаюсь вставить новую ссылку диалога, используя .on(), чтобы выбрать существующий div, ссылка не создает диалог, а скорее просто ссылается на страницу.Как использовать jQuery .on() для обработки события click для недавно вставленной диалоговой ссылки?

Может кто-нибудь помочь показать, как это должно быть сделано?

Вот пример кода:

<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. исключает цикл .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();

});

источник

2013-03-19 aaron

Для меня нет ничего плохого в ваших селекторах.

Вы можете удалить заднюю "

//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, но я так и хотел бы настроить его.

источник

2013-03-19 14:38:24

Да, спасибо. Однако это не помогло. Любая идея, почему код диалога не работает? – aaron

Должна ли функция .on передавать то, что требуется функции .each? – aaron

см. Обновленный ответ –

Как использовать jQuery .on() для обработки события click для недавно вставленной диалоговой ссылки?

ответ

Смежные вопросы