Question

与此相似： Event binding on dynamically created elements?

但我没有使用.addClass将元素仅动态一个添加到元素。

基本的HTML：

(function($){
$.fn.sharePop = function(){
if(typeof OpenPopUpPage == 'function'){
  return this.each(function(i){
    if($(this).attr('href') != null){
     $(this).click(function(e){
       e.preventDefault();
        OpenPopUpPage($(this).attr('href'));
      });
    }
  });
}
else{
  return false;
}
};
})(jQuery);
$(document).ready(function(){
$('.dialog-pop').sharePop();
 });

功能：

$( document ).ready(function() {
    $( "#WebPartWPQ6_ChromeTitle a" ).addClass( "dialog-pop" );
});

添加课程：

$(this).click(function(e){

班级得到了很好的补充。但我的假设是当事件附加到元素时它不存在 - 并且这条线需要改变：

$(this).on('click', '.dialog-pop', function(e){

我试过了：

------------------------------ MODULE WFBranch ------------------------------

VARIABLE state

START == "start"
LEFT == "left"
RIGHT == "right"

Init == state = START

Next ==
    \/  /\ state = START
        /\  \/ state' = LEFT
            \/ state' = RIGHT
    \/  /\ state \in {LEFT, RIGHT}
        /\ state' = START

Spec ==
    /\ Init
    /\ [][Next]_<<state>>
    /\ WF_<<state>>(Next) \* Avoid stuttering at start

(*
This passes, but it does not ensure that there exist different paths covering both
branches - e.g. state might never be LEFT.
*)
CheckEventualStates == \/ (state = START) ~> (state = RIGHT)
                       \/ (state = START) ~> (state = LEFT)

=============================================================================

但没有运气。

Answer 1

$（document）.on（＆＃39;点击＆＃39;，＆＃39; .dialog-pop＆＃39;，function（）{ 返回函数{ 代码在这里 }; }）;

Answer 2

基本上，当你实例化元素

时

$('.dialog-pop').sharePop()

它会在.dialog-pop中使用document搜索元素，并在您编写时绑定事件。因此，如果有一个新的动态添加元素，无论该元素是否具有首先使用的实例化的选择器，sharePop函数都不知道该怎么做。因此，不是添加类，而是直接实例化元素。

$('#WebPartWPQ6_ChromeTitle a').sharePop()

如果您需要使用选择器，事件委派就是可行的方法。如果您强行无法确定您将要使用并且当前使用jQuery 1.7或更低版本的选择器，.selector属性可能有所帮助。

哦，需要注意的是，我认为先前破坏相同的事件 - 防止它执行两次，等等 - （尽管你使用preventDefault）是好的。

$.fn.sharePop = function() {
  if (typeof OpenPopUpPage == 'function'){
    var selector = this.selector

    $(document).off('click').on('click', selector, function (e) {
      e.preventDefault()
      var href = $(this.attr('href'))

      if (href) {
        OpenPopUpPage($(this).attr('href'))
      }
    })

    return this
  }

  return false
};

如果版本jQuery大于1.7，则将选择器应用为参数。另请注意，我使用命名空间事件来防止销毁已附加的其他click事件。

$.fn.sharePop = function(selector) {
  if (typeof OpenPopUpPage == 'function'){
    if (typeof selector === 'string') {
      $(document).off('click.openpopup').on('click.openpopup', selector, function (e) {
        e.preventDefault()
        var href = $(this.attr('href'))

        if (href) {
          OpenPopUpPage($(this).attr('href'))
        }
      })
    } else {
      // attach the event like you already did?
    }

    return this
  }

  return false
};

实际上，如果我不想像$.fn.sharePop或$('.dialog-pop').sharePop('refresh')那样分享方法/ API，而不仅仅是绑定，我就永远不会像$('.dialog-pop').sharePop('destroy')那样创建插件。直接准备文件的事件。

将类动态添加到元素时，单击事件不会触发

2 个答案: