Jqueryが隠しテキストフィールドから値を取得する

Question

jqueryを使用して隠しテキストフィールドから値を取得しようとしましたが、成功しません。 これは動的にページにHTMLを追加するjavascript関数です。

  function(lng,lat) 
      { 
      document.getElementsByClassName("BranchDetails").item(0).innerHTML+="" 
      +" <div class='Branches'>" 
      +"  <div class='DeleteIcon'><img src='../Images/deleteicon.png' width='15' height='15'></div>" 

      +"  <div class='BranchName'>" 
      +"  <div class='CompanyBranchNameText'>" 
      +"   Company Name" 
      +"  </div>" 


      +"  <div class='EditCompanyBranchName'>" 
      +"   <label>Company Name:</label><input type='text' class='EditNameText' >" 
      +"   <input type='hidden' class='longitudeVal' value='"+lng+"' /><input type='hidden' class='latitudeVal' value='"+lat+"' />" 
      +"  </div>" 
      +"  <a href='javascript:void(0)' class='EditNameLink'><p>edit...</p></a>" 
      +" </div>" 
      +" </div>"; 
      } 

ここで、非表示のテキストフィールドの値を取得します。 私がやったことはこれまでのところです。

  $('.Branches').children('.DeleteIcon').click(

     function() 
     { 
       alert($(this).siblings('.EditCompanyBranchName').children('.longitudeVal').val()); 
     } 
      ); 

これは私に未定義の値を返しています。 隠しフィールドにlngとlatの値を入れていますが、アラートボックスを使ってチェックしました。

Answer 1

問題は、.EditCompanyBranchNameは、.DeleteIconの兄弟ではないため、それは子供です。これは、クリックされた.DeleteIconと同じ.Branches要素内.logitudeValと.latitudeValフィールドを検索します

$('.Branches').children('.DeleteIcon').click(function() { 
    var long = $(this).parent().find('.longitudeVal').val(); 
    var lat = $(this).parent().find('.latitudeVal').val(); 
    alert(long); 
    alert(lat); 
}); 

：これを試してみてください。

Answer 2

あなたのjavascriptのクリックイベントを簡素化するために、あなたはユニークなIDを持つ隠し入力を設定し、jQueryを使ってそのIDをターゲットにできます。

あなたの機能で（LNG、緯度）

... 
<input type='hidden' id="Jquery_latitude" class='latitudeVal' value='"+lat+"' /> 
... 

今、 '.DeleteIcon' のイベントをクリックしてください：

$('.Branches').children('.DeleteIcon').live("click", function() { 
    var lat = $('#Jquery_latitude').val(); 
    alert(lat); 
}); 

注： 私はこのクリックイベントを.live()に設定して、動的に作成された要素で利用できるようにしました。