동적 부모 자식 개체에서 이벤트를 처리하는 방법

Question

동적 부모 내부 동적 부모에 관해서는 여전히 통계적으로 다르지 않습니다. 혼란스럽고 최악의 경우 어떻게 한 번 그리고 어떻게하면 원하는대로 조작 할 수 있는지 알 수 있습니다.

당신의 정보는 Javascript와 Jquery에서 매우 새로워졌습니다. 그러나 누군가가 올바른 지침과 권리 구문을 제공한다면 따라 잡을 수 있습니다. 나는 그 코드에서 내가 더 많이 배울 수 있고 이해할 수있는 깨끗한 코드를 좋아한다.

하자 내가 그것을 firebugs에 동일합니다이 구조 HTML을 갖고 있다고 : -

<div name="div0" class="div0"> 
<input name="txt0" class="txt0"> 
<br/><br/> 
<div name="div1[]" class="divL1"> 
    <button class="btn1"></button> 
    <button class="btn2"></button> 
    <input name="txtL1_a[]" class="cLtxt1"> 
    <input name="txtL1_b[]" class="cLtxt1"> 
      <br/><br/> 
      <div name="div2[]" class="divL2"> 
        <div id="ui-widget"> 
        <input name="txtL2_a[]" class="cLtxt2 autosuggest"> 
        </div> 
        <input name="txtL2_b[]" class="cLtxt2"> 
      </div> 
    <br/><br/> 
<div name="div1[]" class="divL1"> 
    <button class="btn1"></button> 
    <button class="btn2"></button> 
    <input name="txtL1_a[]" class="cLtxt1"> 
    <input name="txtL1_b[]" class="cLtxt1"> 
      <br/><br/> 
      <div name="div2[]" class="divL2"> 
        <div id="ui-widget"> 
        <input name="txtL2_a[]" class="cLtxt2 autosuggest"> 
        </div> 
        <input name="txtL2_b[]" class="cLtxt2"> 
      </div>     
</div> 
<br/><br/> 

는 사실 내 머리에 질문을 많이 가지고 있지만, 내가 먼저 몇 가지 질문을 물어 보자.

1 내가 실행할 .autosuggest가이 전에 때문에 일반적인 양식에 나를 위해 복잡 어디 실행을 관리 할 수 ​​있지만, .autosuggest 내부 동적 부모 DIV 및 동적 입력에있는 때이 값을 얻을 수 있으며, 자동 완성 표시.

주어진 id "txtL2_a []"함수에 의해 SearchText는 성능 자동 완성을 수행 할 수 없으며 어떤 인덱스가이를 수행하는지 알지 못합니다. 하자 내가

<input name="txtL2_a[]" class="cLtxt2 autosuggest"> //index :1 

을 채우기 말할 ​​때 자동으로 내부

<input name="txtL2_b[]" class="cLtxt2"> 'Index 1 

가치 -

function SearchText() { 
     $(".autosuggest").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        url: "frmsetuptrip.aspx/GetAutoCompleteData", 
        minLength: 3, 
        data: "{'presearch':'" + document.getElementById('txtL2_a[]').value + "'}", 
        dataType: "json", 
        success: function (data) { 
         if ((data.d).length == 0) { 
          //$('#button9').show(); 
          var result = [ 
    { 
     label: 'No matches found', 
     value: response.term 
    } 
          ]; 
          response(result); 
         } 
         else { 
          response(data.d); 
         } 
        }, 
        error: function (result) { 
         alert("Error"); 
        } 
       }); 
      } 
     }); 
    } 

2하자가

<div name="div1[]" class="divL1"> //index 1 

에 내가 채워 몇 가지 자동 필요하다고

는 부모 색인 만 변경합니다.

3. 전에 다음이 의사 코드와 같은 특정 하위 기능 또는 작업을 갈 경우 내가 모든 이벤트를 잡아 그하여 정교한 수있는 하나 개의 함수 어쨌든있다 : -

$("div.div0").each(function (event) { 

    if (event=="keyup" on child=="divL1"+index[0]){ 
     //detect more spesific which object are doing that 
     if (whoisdoing=="txtL1_a[]"+index[0] { 
      //then do action etc: fill up parent input 
      $("div0.txt0").val($(txtL1_a.index[0]).val()); 
     } 
     if (whoisdoing=="txtL1_b[]"+index[0] { 
     //then do action etc: fill up childs input 
      $("div2[index[0]].txtL2_b[index[0]].val($(txtL1_b[index[0]]).val()); 
     } 
    } 

//event - keypress 

//event - click 

//and many more 

    }); 

I가 찾을 수없는이 위의 모든 문제에 관한 인터넷. 누구나 솔루션을 가지고 있거나 공유 기능을 개발했다면 쉽게 해결할 수 없다고 생각합니다.

어쨌든 내 질문을 읽고 회신 해 주셔서 감사합니다.

좋습니다.

Answer 1

다시 생각하고 다시 생각해보십시오. 해결책이 있어야합니다!

권리 이제 KEYUP을 처리 할 수 ​​있으며 특정 작업을 수행 할 수있는 특정 입력 태그가있는 동적 인 하위를 클릭 할 수 있습니다. 동적 부모 내에서 동적 자식에서 찾았습니다. 직접 클래스 이름과 Catch 부모 인덱스를 먼저 사용해야합니다.

내 HTML 구조는 아래 구문을 사용할 수 없습니다 : -

$(document).ready(function() { 
     var buttons = document.getElementsByTagName('button'); 
     var buttonsLength = buttons.length; 
     for (var i = 0; i < buttonsLength; i++) { 
      buttons[i].addEventListener('keyup', clickResponse, false); 
     }; 
    }); 
    function clickResponse() { 
     // do something based on button selection here... 
    } 

는 난 단지 실행 시간에 추가 만 동적 자녀/부모없이 첫 번째 수준 상위에서 실행할 수있는 구문 이상 발견했다.

내가하는이 문법은 아래의이 문법을 사용하여 문제 번호 2와 3을 해결합니다..

 $("div.div0").on("keyup", "input", function() { 
      //detect name and val which input are doing keyup 
      handler = $(this).val(); 
      name = $(this).attr('name'); 
      parHandler = name; 
      //only this input I want do some task 
      if (name == "txtL1_a[]") { 
       dcAction = "FillUpOtherInput"; 
       FillUp; //run functions     
      } 
     }); 

     function FillUp() { 
      if (dcAction == "FillUpOtherInput") { 
       alert("Handler Name: " + parHandler + " Index Level :" + dc2); 
       //make sure right Parent Index before insert a value 
       //--should i loop 
       $("div.purchase-items").each(function (i) { 
        alert(i); 
        if (i == dc2) { 
         $(this).find("input[name='txtL1_b[]']").val("Hai"); 
        } 
        i+1 
       }); 
       parHandler = ""; 
       dc2 = ""; 
       dcAction = ""; 
      } 
     } 

예! 동일한 상위 지수에서 다른 입력 값을 채울 수 있습니다.

Dynamic Parent (동적 부모) 내에서 Dynamic Child (동적 부모)와 관련하여 문제가있는 사람이 있다면 나와 같은 행동을 취할 때 문제를 해결하기 위해이 구문을 참조 할 수 있습니다.

누군가 더 좋은 해결책이 있다면 Jquery 기능에 대해 저와 같은 다른 사람을 도와주세요. ** 동적 같은 특정 요소에 가서 직접 있습니다 (인덱스 *를 알고있는 경우에 ***)

function FillUp() { 
      if (dcAction == "FillUpOtherInput") { 
       $(div.div0).eq(dc2).find("input[name='txtL1_b[]']").val("Hai"); 
       parHandler = ""; 
       dc2 = ""; 
       dcAction = ""; 
      } 
     } 

난 그냥 EQ를 알고 -이 :

Answer 2

은이 아래에 따라 fillup 기능에 대한 짧은 구문을 만들려면 부모/자식 기반의 인덱스. 질문에 대한

Answer 3

나는이 줄 구문을 사용하는 동적있는 아이 일을 감지 아니 1 개에 대한 자동 완성 : -

function SearchText(pIndex,iValue) { 
     //alert(dc2 + "/" + iValue); 
     $("div.divL2").eq(pIndex).find(".autosuggest").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        url: "frmsetuptrip.aspx/GetAutoCompleteData", 
        minLength: 3, 
        data: "{'presearch':'" + $("div.divL2").eq(pIndex).find("input[name='txtL2_a[]']").val() + "'}", 
        dataType: "json", 
        success: function (data) { 
         if ((data.d).length == 0) { 
          //$('#button9').show(); 
          var result = [ 
    { 
     label: 'No matches found', 
     value: response.term 
    } 
          ]; 
          response(result); 
         } 
         else { 
          response(data.d); 
         } 
        }, 
        error: function (result) { 
         alert("Error"); 
        } 
       }); 
      } 
     }); 
    } 

이제 내 자동 완성 txtL2_a [] 값을 잡아 목록을 표시 할 수있는 부모 알 수 있습니다 . 내가 배우고 당신을 공유하고 무엇

는 키

$ ("div.divL2"). EQ (pIndex) .find (". 자동 제안")

$ (이다 부모 이름은 무엇입니까?) eq (-put parent index -) find (입력시 -class name)

!

새로운 질문입니다.이 질문을 읽고 누군가 내가 여기서 쓴 것으로부터 아이디어를 얻을 수 있기를 바랍니다. 누가 나를 돕기 위해 고의적으로 노력하고 있습니까 @baao 정말 감사드립니다.

더 좋은 구문/스크립트가 있으면이 정보를 공유 할 수 있습니다. 어쩌면 검색이 가능하고 나 같은 문제에 직면 할 수도 있습니다.

그리고 나는 이미 알고있는 것과 나의 상황에 관한 문제를 해결하는 것에 대해 기꺼이 솔직 해.