Jquery : 두 번째 호출에서 클래스가 작동하지 않습니다.

저는 jQuery.just를 처음 접하고 3 주 동안 학습하고 사용합니다. 물건 정리를 위해 수업을 작성했습니다. 두 개 이상의 이벤트가있는 내 메서드를 호출하지만 두 번째 이벤트가 트리거되는 동안 이벤트가 작동하지 않습니다. 선택기에 문제가 없습니다. 내 수업에는 뭔가 빠져 있다고 생각합니다. 나는 모른다. 도와주세요! 여기에 코드 조각입니다 :Jquery : 두 번째 호출에서 클래스가 작동하지 않습니다.

$("#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)입니다. 그게 무슨 특정 _tag에 _id와로드 HTML입니다.

(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);

답을 기대하고, 정말 감사합니다!

 
<!-- 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과 사업부에서 동적으로 내용을로드하고 있습니다 :

여기 내 DOM 구조입니다. , $("#btnID").livequery('click',function(){});

-bgreen1989

출처

2008-12-15 mars-o

내가 말하는 버튼이 어디에 정의되어 있는지 알 수 없습니까? btnDocListBack btnPersonalNext 등? – krosenvold

내가 이상 그것을 간단히 살펴주고, 코드 크기가 진단 조금 힘들었다 : 나는이 사용과, livequery 플러그인을 사용하는 것을 바인딩하는 방법을 다른 몰라 그래서 나는 나 자신과 다른 사람들에게 더 이해하기 쉽게되기를 희망했다.

내가 생각하는 부분은 문제의 부분이고 BADTHING (TM)은 문자열을 함께 붙이는 것으로 html을 생성합니다. 이것은 DOM 이벤트 바인딩을 깨고 정말 끔찍한 코드를 렌더링 할 수 있습니다.

라이브 쿼리를 사용하는 것을 보면, "glue strings together"메소드가 실시간 쿼리 트릭을 만드는 데 필요한 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);

출처

2008-12-15 07:11:50

Jquery : 두 번째 호출에서 클래스가 작동하지 않습니다.

답변

관련 문제