Question

我将onchange函数设置为表格行中的选择输入，我克隆并附加了一行按钮。克隆没有响应正在设置的onchange函数。这是迄今为止的代码

<!-- clone and append function-->

$("button").click(function() {
  var clone = $('#item_row').clone();
  $('#item_row').after(clone)    
});    

$('#quantity').change(function() {
  $('.price').text($('.price').val() * $(this).val())
})

<html>
  <body>
    <table>
      <thead>
        <tr id="item_row">
          <td>
            <select id="quantity">
              <option>1</option>
              <option>2</option>
              <option>3</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>
            <p class="price">20,000</p>
          </td>
        </tr>
      </thead>
    </table>
    <button>Fetch Row</button>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</html>


<!-- begin snippet: js hide: false console: true babel: false -->

Answer 1

有几个问题。

首先使用.on等

$(document).on('click', '. quantity', function () {
    // do stuff here
});

其次，由于没有唯一标识符，js如何知道您正在更改哪个数量？您必须使用rel =＆＃34; unique_id＆＃34;添加一个并保持运行计数以添加到克隆的行。

第三，不要使用ID =＆＃34;数量＆＃34;让它成为一个班级，因为你有多个

Answer 2

你去了：

您的数量计算错误，<p>没有“价值”。还要为克隆的选择使用事件委托，否则将无法识别它们。

$("button").click(function(){
	var clone = $('#item_row').clone();
    $('#item_row').after(clone)
});

$(document).on('change', '.quantity', function() {
	$('.price').text(parseInt($('.price').text()) * $(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
            <tr id="item_row">
                    <td>
                        <select class="quantity">
                               <option>1</option>
                               <option>2</option>
                               <option>3</option>     
                        </select>                                                                     
                    </td>
                </tr>
                <tr>
                    <td>
                        <p class="price">20,000</p>
                    </td>
                </tr>
            </thead>
        </table>
        <button>Fetch Row</button>

Answer 3

使用class而不是id更改更改事件的选择器.Id对于整个文档是唯一的。对于动态创建的元素，请单击使用on()

$("button").click(function() {
  var clone = $('#item_row').clone();
  $('#item_row').after(clone)

});


$(document).on('change','.quantity',function() {
  $('.price').text($('.price').val() * $(this).val())
  console.log('changed')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr id="item_row">
      <td>
        <select id="quantity" class="quantity">
                               <option>1</option>
                               <option>2</option>
                               <option>3</option>     
                        </select>
      </td>
    </tr>
    <tr>
      <td>
        <p class="price">20,000</p>
      </td>
    </tr>
  </thead>
</table>
<button>Fetch Row</button>

如何在更改时更改克隆元素的值

3 个答案: