Question

我是jQuery的新手。直到现在才学习和使用它3周。我写了一个班来整理东西。我用超过2个事件调用我的方法，但在触发第二个事件期间事件不起作用。选择器没有问题。我觉得我班上缺少一些东西。我不知道。请帮忙！这是片段：

$("#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加载到具有特定_tag的某个_id。

(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结构：

<!-- JS  -->
<script type="text/javascript" src="jquery_plugins/jquery-1.2.6.js" ></script>
<script type="text/javascript" src="jquery_plugins/jquery.livequery.js" ></script>
<script type='text/javascript' src='jquery_plugins/jquery.simplemodal.js'></script>
<script type="text/javascript" src="jquery_plugins/jquery.session.js"></script>
<!--<script type="text/javascript" src="jquery_plugins/jquery-plugin-wrapinner.js"></script>-->
<script type="text/javascript" src="jquery_plugins/jquery.content.js"></script>
<script type="text/javascript" src="jquery_plugins/osra_main.js"></script>
</head>

<body>
<div id="wrapper">   
    <div id="header">
        <div id="headercontent">Please Enable JavaScript to Continue</div>
    </div>
    <div id="main">
        <div id="sidebarpaper" class="left">
            <!-- sidebar contents (class="sidebar")-->
        </div>
        <div id="contentpaper" class="right">
            <!-- main contents (class="content")-->
        </div>
        <div id="modals" class="clear">
            <!--modal pop-up window -->
        </div>
    </div>
    <div id="footer"><p></p></div>
</div>
</body>
</html>

我在ID为#contentpaper的div中动态加载内容。我不知道如何重新绑定，其他使用livequery插件，这个用法： $("#btnID").livequery('click',function(){});

-bgreen1989

Answer 1

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

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

此外，看到你依赖于实时查询，“粘合字符串在一起”方法可能不会触发进行实时查询技巧（不确定）所需的dom事件，并且你/可能/发现使用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);

Jquery：我的班级在第二次通话时不起作用

1 个答案: