无法使用eq()获取动态添加的单选按钮子项

时间:2018-05-08 13:27:03

标签: javascript jquery

如何获取加载DOM后动态添加的最后一个单选按钮的ID



jQuery(document).on("click", ".create-wishlist-items li.wish-item", function() {
  var thisItem = jQuery(this).index();

  jQuery('#itoris-wishlist-radiostack div').eq(thisItem).children('.itoris-wishlist-radio').click();
  jQuery('.itoris-wishlist-button-select').click();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="itoris-wishlist-radiostack">
  <div>
    <input class="itoris-wishlist-radio" name="itoris-wishlist-radio" value="1020" id="itoris-wishlist-radio-1020" alt="Chezil" type="radio">
    <label for="itoris-wishlist-radio-1020">Chezil</label>
  </div>
  <div>
    <input class="itoris-wishlist-radio" name="itoris-wishlist-radio" value="1021" id="itoris-wishlist-radio-1021" alt="Chezil1" type="radio">
    <label for="itoris-wishlist-radio-1021">Chezil1</label>
  </div>
  <div>
    <input class="itoris-wishlist-radio" name="itoris-wishlist-radio" value="1019" id="itoris-wishlist-radio-1019" checked="checked" alt="Main" type="radio">
    <label for="itoris-wishlist-radio-1019">Main</label>
  </div>
</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

您可以使用jQuery('.radio-wrap input').last().attr('id');

请参阅添加的代码段以供参考。

var c = 4;
function addRadio(){
	jQuery('.radio-wrap').append('<input type="radio" id="'+ c +'" value="4">');
  	c++;
}
function getLast(){
var elID = jQuery('.radio-wrap input').last().attr('id');
console.log(elID);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onclick="addRadio()">
Add radio
</button>
<div class="radio-wrap">
  <input type="radio" id="1" value="1">
  <input type="radio" id="2" value="2">
  <input type="radio" id="3" value="3">
</div>
<button onclick="getLast()">Get Last</button>

答案 1 :(得分:0)

     //create new element (div) for #itoris-wishlist-radiostack
var new_div=$('<div/>');
     
     //create new radio for this div
var new_input=$('<input/>');
  new_input.attr({'type':'radio', 'class':'itoris-wishlist-radio','name':'itoris-wishlist-radio', 'value':'1022', 'id':'itoris-wishlist-radio-1022'});
     //add raddio into div
new_div.append(new_input);

     //create new label for this div
var new_label=$('<label/>');
  new_label.attr({'for':'itoris-wishlist-radio-1022'}).html('Test');

     //add label into div
new_div.append(new_label);


     //add new div into #itoris-wishlist-radiostack
$('#itoris-wishlist-radiostack').append(new_div);
  
       //new radio button click!!!
  new_input.click();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div id="itoris-wishlist-radiostack">
  <div>
    <input class="itoris-wishlist-radio" name="itoris-wishlist-radio" value="1020" id="itoris-wishlist-radio-1020" alt="Chezil" type="radio">
    <label for="itoris-wishlist-radio-1020">Chezil</label>
  </div>
  <div>
    <input class="itoris-wishlist-radio" name="itoris-wishlist-radio" value="1021" id="itoris-wishlist-radio-1021" alt="Chezil1" type="radio">
    <label for="itoris-wishlist-radio-1021">Chezil1</label>
  </div>
  <div>
    <input class="itoris-wishlist-radio" name="itoris-wishlist-radio" value="1019" id="itoris-wishlist-radio-1019" checked="checked" alt="Main" type="radio">
    <label for="itoris-wishlist-radio-1019">Main</label>
  </div>
</div>