CODEWITHSUNDEEP
jquery
John
John

Reputation: 4028

Button is not clicked

I have a button Add row. Click on button will add a new row.

If you click on X mark of 1st row or 2nd row which are original, it shows alert box.

However, if you click on X mark of newly added row, it does not shown alert box. It is so strange, because the html of newly added row is similar to original row. 

< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" > < /script>
<script>
$(document).ready(function(){
	$("#btn1").click(function(){
  	 index = Math.floor(Math.random() * 10000) + 1;
     jQuery(".fes-variations-list-multiple").append('<tr class="fes-single-variation">'
                                                    +    '<td class="fes-name-row">'
                                                    +        '<input class="fes-name-value" name="option['+(index)+'][description]" id="option['+(index)+'][description]" rows="3" value="'
                                                    + index
                                                    + '" type="text">'
                                                    +    '</td > '
                                                    +    ' < td class = "fes-price-row" > '
                                                    +        ' < input class = "fes-price-value"
name = "option['+(index)+'][price]"
id = "option['+(index)+'][price]"
value = "0"
type = "text" > '
                                                    +    ' < /td>'
                                                    +    '<td class="fes-delete-row">'
                                                    +        '<a href="#" class="edd-fes-delete">'
                                                    +            '×'
                                                    +        '</a > '
                                                    +    ' < /td>'
                                                    +'</tr > ');
    
  });
  jQuery('.fes - delete - row ').click(function(){
  	alert("X is clicked");
  
  });
  
  
  
  
  
  
  
  
});
    
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<body>
  <button id="btn1">Add row</button>
  <div class="fes-fields">
    <table class="multiple">
      <thead>
        <tr>
          <th class="fes-name-column">Chủng loại hàng hóa</th>
          <th class="fes-price-column">Số tiền ( VND)</th>
          <th class="fes-remove-column">&nbsp;</th>
        </tr>
      </thead>
      <tbody class="fes-variations-list-multiple">




        <tr class="add_new" style="display:none !important;" id="multiple"></tr>
        <tr class="fes-single-variation">
          <td class="fes-name-row">
            <input class="fes-name-value" name="option[3041][description]" id="option[3041][description]" rows="3" value="Đồ chơi ô tô" type="text">
          </td>
          <td class="fes-price-row">
            <input class="fes-price-value" name="option[3041][price]" id="option[3041][price]" value="0" type="text">
          </td>
          <td class="fes-delete-row"><a href="#" class="edd-fes-delete">×</a>
          </td>
        </tr>
        <tr class="fes-single-variation">
          <td class="fes-name-row">
            <input class="fes-name-value" name="option[5053][description]" id="option[5053][description]" rows="3" value="Đồng hồ đeo tay" type="text">
          </td>
          <td class="fes-price-row">
            <input class="fes-price-value" name="option[5053][price]" id="option[5053][price]" value="0" type="text">
          </td>
          <td class="fes-delete-row"><a href="#" class="edd-fes-delete">×</a>
          </td>
        </tr>
      </tbody>

    </table>
  </div>
</body>

Upvotes: 0

Views: 26

Answers (1)

Shyju
Shyju

Reputation: 218722

You have to use jQuery on to register your click event. jQuery on will work for current and future elements(dynamically injected to DOM). 

$(document).on("click",".fes-delete-row",function(e){

    e.preventDefault();
    alert("X is clicked");

});

Upvotes: 2

Related Questions