Question

我有一个按钮，单击此按钮时，我需要动态生成一个链接，并为其添加一个处理程序，显示一个Twitter引导程序模式。我试过这个：

$(function() {

  function showModal() {
    $("#myModal").modal("show");
  }

  $(document).on("click", "#my_btn", function() {
    //generating a link a adding a handler to it which is "showModal()"
    //.....
    $("#my_href").html("Some text123 <a href='#' onclick='showModal();'>test123</a>.");
    //.....
  })
});

但是当我碰到这个链接时，错误被抛出

Uncaught ReferenceError: showModal is not defined

我当然可以将showModal()移出$(function() {...})。但我想知道，有更好的方法吗？总的来说，这是实现我想要的好方法吗？

更新：即使将showModal()移出$(function() {...})它也无法正常工作，它会将我重定向到同一页面，但不会显示弹出窗口。

Answer 1

不要使用内联Javascript。您已经发布了一个完美的示例，说明应该在您的问题中正确执行此操作：在包含元素上使用.on。

 $(document).on("click", "#my_btn", function() {
    $("#my_href").html("Some text123 <a href='#'>test123</a>.");
 });

 $('#my_href').on('click', 'a', showModal);

Answer 2

使用jQuery委托事件处理程序添加单击处理程序

$(function () {

    function showModal() {
        $("#myModal").modal("show");
    }

    $(document).on("click", "#my_btn", function () {
        //generating a link a adding a handler to it which is "showModal()"
        //.....
        $("#my_href").html("Some text123 <a href='#' class='showmodal'>test123</a>.");
        //.....
    });

    $("#my_href").on('click', '.showmodal', showModal)
});

在你的情况下，你有一个调用showModal的内联事件处理程序，这需要一个名为showModal的方法在全局范围内，但你已经添加了方法showModal作为闭包方法在dom ready handler。

Answer 3

$(function() {
   function showModal() {
     alert("Modal");
   }
    $('<a/>',{
        href: '#',
        text: "Click Me",
        click: function(e) {
          e.preventDefault();
          showModal();
        }
    }).appendTo('#my_href');
});

jsfiddle

Answer 4

在这里，您应该将事件附加到正文或文档而不是按钮

 $("body").on( "click","button[id$=my_btn]",  function(){

        alert( "hi" );
    })

动态地将事件处理程序添加到也是动态生成的href

4 个答案: