javascript - 如何在加载 html 代码时调用 javascript 函数

Question

function addMore() {
	$("<div>").load("m_text.php", function() {
			$("#product").append($(this).html());
	});	
}

the below html code with flate_rate function is in m_text.php

<div class="float-leftt"><input type="number" name="saleable_area[]" id="isalable_area[]" placeholder="Salable Area" /></div>
    <div class="float-leftt"><input type="number" name="flat_rate[]" id="iflat_area[]" placeholder="Flat Rate"/ onkeyup="flat_rate()"></div>
    <div class="float-leftt"><input type="number" name="flat_cost[]" id="iflat_cost[]" placeholder="Flat Cost"/></div>


<script type="text/javascript">
    function flat_rate(){
    var salable_area = document.getElementById("isalable_area[]");
    var flat_area = document.getElementById("iflat_area[]");
    var flat_cost=[];
    var i=0;
    
     flat_cost[0] = salable_area.value*flat_area.value;
    alert( flat_cost[0]);
    document.getElementById("iflat_cost[]").value=(flat_cost[0]);
    }
</script>

add more code
<input type="button" id="add_button" name="add_item" value="Add More"  style="width:15%;" onClick="addMore();"/>

当 html 代码第一次运行时，这段代码可以正常工作。当用户单击添加更多按钮时，此 html 代码会在那时再次加载，计算值不会出现在固定成本中。

如果我使用 class 而不是 id，那么它会在输出中显示 NaN。请帮我。谢谢

Answer 1

根据你的示例代码，你可以试试这个:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
  function addMore() {
    $("#product").append($("div.block").html());
  }
</script>

<div id="product">
  <div class="block">
    <div class="input">
      <div class="float-leftt"><input type="number" name="saleable_area[]" id="isalable_area[]" placeholder="Salable Area" /></div>
      <div class="float-leftt"><input type="number" name="flat_rate[]" id="iflat_area[]" placeholder="Flat Rate"/></div>
      <div class="float-leftt"><input type="number" name="flat_cost[]" id="iflat_cost[]" placeholder="Flat Cost"/></div>
    </div>

    add more code
    <input type="button" id="add_button" name="add_item" value="Add More"  style="width:15%;" onClick="addMore();"/>
  </div>
</div>

<script>
  $("#product").on('keyup', "[name='flat_rate[]']", function(){
    var salable_area = $(this).parents("div.input").find("[name='saleable_area[]']");
    var flat_area = $(this);
    var flat_cost=0;

    flat_cost = salable_area.val()*flat_area.val();
    alert( flat_cost);
    $(this).parents("div.input").find("[name='flat_cost[]']").val(flat_cost);
  });
</script>

如果要加载文件，可以取<div class="block">...</div> block 到你的文件，然后修改添加更多功能:

$.get( "m_text.php", function( data ) {
    $("#product").append(data);
});