jquery livequery 자동 해결을 고치지 않습니까?

Question

주문 상품 검색 입력란에 자동 제안 기능이 있습니다.

여기에 문제가되는 것은 주문 상품 제목 아래에 녹색 검색 버튼을 추가하면 자동 제안 플러그인이 작동하지 않습니다. 새로운 분야. 나가 읽은 몇몇 기사에서, 나는 autosuggest가이 문제점을 고칠 것이라고, 그러나 고치지 않을 것이라는 점을 생각했다. 왜 그런가?

자동 제안 :

$("#PRODUCTNAME").autocomplete("orders.cs.asp?Process=ListProducts", { 
    selectFirst: false 
}); 

$("#PRODUCTNAME").result(function(event, data, formatted) { 
    if (data) 
     $("#PRICE").html(data[1]); 
     $("#ID").html(data[2]); 
     $("#UNITPRICE").html(data[1]); 
     $("#PRODUCTID").html(data[2]); 
}); 

새로운 필드를 추가

$('#AddProduct').livequery('click', function(event) { 
    $('#OrderProducts').append('<div class="column width50"><input type="text" id="PRODUCTNAME" name="PRODUCTNAME" value="" class="width98" /><input type="hidden" id="PRODUCTID" name="PRODUCTID" /><input type="hidden" id="UNITPRICE" name="UNITPRICE" /><small>Search Productsvalue="" class="width98" /><small>Quantity</small></div><div class="column width30"><span class="prices">Unit Price:<br />Total Price:</span></div>'); 
    return false; 

});

HTML

 <fieldset> 
      <h2>Order Items</h2> 
      <div id="OrderProducts"> 
       <a href="#" id="AddProduct"><img src="icons/add.png" alt="Add" /></a><a href="#" id="DeleteProduct"><img src="icons/cancel.png" alt="Cancel" /></a> 
      </div> 

       <input type="hidden" id="PRODUCTID" name="PRODUCTID" /> 
       <input type="hidden" id="UNITPRICE" name="UNITPRICE" /> 
       <small>Search Products</small> 
      </div> 
      <div class="column width20"> 
       <input type="text" id="UNITPRICE" name="UNITPRICE" value="" class="width98" /> 
       <small>Quantity</small> 
      </div> 
      <div class="column width30"> 
       <span class="prices">Unit Price:<br />Total Price:</span> 
      </div> 
     </fieldset> 
}); 

Answer 1

내가 문제를 이해 할수는 새 요소에 자동 완성을 추가하지 않는다는 것입니다. 실제로 라이브 쿼리가 필요하지 않습니다. 따라서 지금과 같은 코드의 두 번째 블록을 변경 :

$('#AddProduct').click(function() { 
     var adding = $('<div class="column width50"><input type="text" id="PRODUCTNAME" name="PRODUCTNAME" value="" class="width98" /><input type="hidden" id="PRODUCTID" name="PRODUCTID" /><input type="hidden" id="UNITPRICE" name="UNITPRICE" /><small>Search Products</small></div><div class="column width20"><input type="text" id="UNITPRICE" name="UNITPRICE" value="" class="width98" /><small>Quantity</small></div><div class="column width30"><span class="prices">Unit Price:<br />Total Price:</span></div>');   
     $('#OrderProducts').append(adding); 

     adding.find("#PRODUCTNAME").autocomplete("orders.cs.asp?Process=ListProducts", { 
      selectFirst: false 
     }).result(function(event, data, formatted) { 
      if (data) { 
       adding.find("#PRICE").val(data[1]); 
       adding.find("#ID").val(data[2]); 
       adding.find("#UNITPRICE").val(data[1]); 
       adding.find("#PRODUCTID").val(data[2]); 
      } 
     }); 

     return false; 
}); 

내가 그 여기 저기에 하나 또는 두 개의 작은 비틀기를 금지, 그것을해야한다 생각한다.

방법으로 양식 요소를 어떻게 처리하는지에 대한 두 가지 의견 - 동일한 ID를 가진 두 개 이상의 요소가있는 메서드는 결과가 잘못되었지만 유효하지 않음 - 클래스를 기반으로 선택하도록 변경할 수 있습니다. 대신. 둘째, html 함수를 사용하여 입력 값을 설정했습니다. 심지어 작동하는지 확신 할 수 없으므로 제안 된 솔루션에서 html 호출을 val로 바 꾸었습니다.