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

我有一个按钮，当点击这个按钮时，我需要动态生成一个链接，并向其中添加一个显示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>.");
    //.....
  })
});

当然，我可以将

showmodel（）

移出

$（function（）{…}）

。但我想知道，有没有更好的方法？总的来说，这是实现我想要的目标的好方法吗

更新：

---

即使在将

showModal（）

移出

$（function（）{…}）

后，它也不起作用，它会将我重定向到同一页面，但不会显示弹出窗口。

不要使用内联Javascript。在你的问题中，你已经发布了一个完美的例子来说明你应该如何正确地做到这一点：在包含元素上使用

.on

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

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

$（文档）。在（“单击”上，“#my_btn”，函数（）{
$（“#my_href”）.html（“一些文本123”）；
});
$（'my#u href'）。on（'click'，'a'，showmodel）；

不要使用内联Javascript。在你的问题中，你已经发布了一个完美的例子来说明你应该如何正确地做到这一点：在包含元素上使用

.on

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

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

$（文档）。在（“单击”上，“#my_btn”，函数（）{
$（“#my_href”）.html（“一些文本123”）；
});
$（'my#u href'）。on（'click'，'a'，showmodel）；

不要使用内联Javascript。在你的问题中，你已经发布了一个完美的例子来说明你应该如何正确地做到这一点：在包含元素上使用

.on

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

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

$（文档）。在（“单击”上，“#my_btn”，函数（）{
$（“#my_href”）.html（“一些文本123”）；
});
$（'my#u href'）。on（'click'，'a'，showmodel）；

不要使用内联Javascript。在你的问题中，你已经发布了一个完美的例子来说明你应该如何正确地做到这一点：在包含元素上使用

.on

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

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

$（文档）。在（“单击”上，“#my_btn”，函数（）{
$（“#my_href”）.html（“一些文本123”）；
});
$（'my#u href'）。on（'click'，'a'，showmodel）；

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

$（函数（）{
函数showmodel（）{
$（#myModal”）.modal（“show”）；
}
$（文档）。在（“单击”，我的btn），函数（）{
//生成链接并向其添加处理程序，即“showModal（）”
//.....
$（“#my_href”）.html（“一些文本123”）；
//.....
});
$（“#我的_href”）。on（'click'，'showmodel'，showmodel）
});

---

在您的例子中，有一个内联事件处理程序正在调用

showmodel

，这要求在全局范围中有一个名为

showmodel

的方法，但您已将该方法

showmodel

添加为dom就绪处理程序中的闭包方法。

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

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

$（函数（）{
函数showmodel（）{
$（#myModal”）.modal（“show”）；
}
$（文档）。在（“单击”，我的btn），函数（）{
//生成链接并向其添加处理程序，即“showModal（）”
//.....
$（“#my_href”）.html（“一些文本123”）；
//.....
});
$（“#我的_href”）。on（'click'，'showmodel'，showmodel）
});

---

在您的例子中，有一个内联事件处理程序正在调用

showmodel

，这要求在全局范围中有一个名为

showmodel

的方法，但您已将该方法

showmodel

添加为dom就绪处理程序中的闭包方法。

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

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

$（函数（）{
函数showmodel（）{
$（#myModal”）.modal（“show”）；
}
$（文档）。在（“单击”，我的btn），函数（）{
//生成链接并向其添加处理程序，即“showModal（）”
//.....
$（“#my_href”）.html（“一些文本123”）；
//.....
});
$（“#我的_href”）。on（'click'，'showmodel'，showmodel）
});

---

在您的例子中，有一个内联事件处理程序正在调用

showmodel

，这要求在全局范围中有一个名为

showmodel

的方法，但您已将该方法

showmodel

添加为dom就绪处理程序中的闭包方法。

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

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

$（函数（）{
函数showmodel（）{
$（#myModal”）.modal（“show”）；
}
$（文档）。在（“单击”，我的btn），函数（）{
//生成链接并向其添加处理程序，即“showModal（）”
//.....
$（“#my_href”）.html（“一些文本123”）；
//.....
});
$（“#我的_href”）。on（'click'，'showmodel'，showmodel）
});

在您的例子中，有一个内联事件处理程序正在调用

showmodel

，这需要在全局范围中有一个名为

showmodel

的方法，但您已经在dom就绪处理程序中添加了该方法作为闭包方法。

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

函数showmodel（）{
警报（“模态”）；
}
$（'
$（函数（）{
函数showmodel（）{
警报（“模态”）；
}
$（'
$（函数（）{
函数showmodel（）{
警报（“模态”）；
}
$（'
$（函数（）{
函数showmodel（）{
警报（“模态”）；
}
$（'
此处，您应该将事件附加到正文或文档，而不是按钮

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

        alert( "hi" );
    })

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

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

        alert( "hi" );
    })

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

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

        alert( "hi" );
    })

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

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

        alert( "hi" );
    })

my_href是什么？我希望它是一个容器，而不是一个链接。您正在被重定向，因为
a
元素的默认行为是将用户重定向到其
href
属性中定义的url。要防止这种情况发生，请使用传递给事件处理程序的
事件
参数：
函数showmodel（e）{e.preventDefault（）；…}
什么是我的href，我希望是一个容器，而不是链接本身您正在被重定向，因为
a
元素的默认行为是将用户重定向到其
href中定义的url