Question

＆＃13;

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

＆＃13;

<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();"/>

＆＃13;

当html代码第一次运行时，此代码可正常工作。当用户点击添加更多按钮时，此html代码再次加载，此时calaculated值不会以平面成本显示。

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

Answer 1

根据您的示例代码，您可以尝试：

＆＃13;

<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>

＆＃13;

如果要加载文件，可以将<div class="block">...</div>块带到文件中，然后修改add-more函数：

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

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

1 个答案: