Jquery：我的课程在第二次通话期间不起作用

Posted 2023-05-08

【中文标题】Jquery：我的课程在第二次通话期间不起作用

【英文标题】：Jquery: My class does not function during second call

【发布时间】：2010-09-26 22:12:33

【问题描述】：

我是 jQuery 的新手。到现在为止只需学习和使用 3 周。 我写了一个类来组织东西。 我用超过 2 个事件调用我的方法，但在触发第二个事件期间该事件不起作用。 选择器没有问题。 我觉得我的课上少了点什么。我不知道。 请帮忙！ 这是sn-p：

$("#btnPersonalNext, #btnDocListBack, #pDocList").livequery('click',function()

  var docListContent = 'loadDocumentList.php';
  $("#contentpaper").addContent(
  
    _tag:'div',
    _id: 'contentDocList',
    _class: 'content',
    _content: docListContent,
    _heading: 'Document List'
  );
  //store personal info in session:
);

addContent() 是函数。 当我单击#btnPersonalNext 时，这有效，但对于#btnDocListBack，不再有效。

这是我的课 (jquery.content.js)。它的作用是将html加载到具有特定_id的特定_tag中。

(function($)

  $.fn.addContent = function(options)
  
    var defaults = 
      _tag: 'div',
      _id: '',
      _class: '',
      _content: '',
      _heading: '',
      _clearExisting:'yes',
      _insertAfterID:'',
      _deleteBeforeInsert:'no'
    ;
    var options = $.extend(defaults, options);

    return this.each(function()
    
      obj = $(this);
      if(options._clearExisting=='yes')
        obj.empty();
      
      if(options._deleteBeforeInsert =='yes')
        $('#'+options._id).remove();
      

      var innerHtml = '<' + options._tag + ' id="' + options._id + '" class="' + options._class + '">';
      if(options._heading!='')
        innerHtml += '<h2>' + options._heading + '</h2>';
      

      if(/^[A-Za-z0-9]+\.php(\??([A-Za-z0-9]+=[A-Za-z0-9]+)(&[A-Za-z0-9]+=[A-Za-z0-9]+)*)?$/.test(options._content))
      //if .php
        $.get(options._content,function(data)
        
          //handle response from server here.
          innerHtml += data;
          innerHtml +='</' + options._tag + '>';
          if(options._insertAfterID !='')
            $('#'+options._insertAfterID).after(innerHtml);
          
          else
            obj.html(innerHtml); 
          
        );
       // PHP rule 
      else
      // .html
        innerHtml += options._content;
        innerHtml +='</' + options._tag + '>';
        if(options._insertAfterID !='')
          $('#'+options._insertAfterID).after(innerHtml);
        
        else
          obj.html(innerHtml); 
        
       // HTML rule 
    ); // End of Returned Function
  ;// End of addContent definition
)(jQuery);

希望得到答案，非常感谢！

这是我的 DOM 结构：

请启用 javascript 以继续

正文>

【参考方案1】：

我快速浏览了一下，代码大小有点难以诊断，所以我重新考虑了一点，希望让自己和其他人更容易理解。

我认为是问题的一部分，而 BADTHING(TM) 是您通过将字符串粘合在一起生成的 html。这可能会破坏 DOM 事件绑定，并呈现非常糟糕的代码。

另外，看到您依赖实时查询，“将字符串粘合在一起”方法可能不会触发制作实时查询技巧所需的 dom 事件（不确定）并且您/可能/ find 使用 DOM 方法生成DOM 元素应该可以解决这个问题

(function($)
  $.fn.addContent = function(options)
  
    var defaults = 
      _tag: 'div',
      _id: '',
      _class: '',
      _content: '',
      _heading: '',
      _clearExisting:'yes',
      _insertAfterID:'',
      _deleteBeforeInsert:'no'
    ;
    var options = $.extend(defaults, options);
    var phpregex = /^[A-Za-z0-9]+\.php(\??([A-Za-z0-9]+=[A-Za-z0-9]+)(&[A-Za-z0-9]+=[A-Za-z0-9]+)*)?$/;

    var x_generateElement = function()
    
      var container = document.createElement(options._tag); 
      $(container).attr("id", options._id); 
      $(container).addClass(options._class);
      if(options._heading!='')
        var header = document.createElement("h2"); 
        $(header).text( options._heading ); 
        $(container).append(header);
      
      return container;
    ;

    var x_preClear   = function( obj )
    
      if(options._clearExisting=='yes')
        obj.empty();
      
      if(options._deleteBeforeInsert =='yes')
        $('#'+options._id).remove();
      
      return obj
    ;

    var x_addElement = function( e , obj )
          
      if(options._insertAfterID !='')
            $('#'+options._insertAfterID).after(e);
      
      else
        obj.html(e); 
      
      return obj;
    ;

    return this.each(function()
    
      var obj = x_preClear( $(this) );
      var container = x_generateElement(); 

      if( phpregex.test(options._content))
        $.get(options._content,function(data)
          //handle response from server here.
          $(container).append(data);
          obj = x_addElement(container, obj);
        );
       else 
        $(container).append(options._content);
        obj = x_addElement(container, obj);
       
    );
  ;
)(jQuery);