-1

我有一个 html 选择和一个添加按钮。如果有人单击添加按钮，则 html 选择创建相同的类，名称。我的问题是如果我更改第一个 html 选择然后更改功能正常工作但如果我更改创建的 html 选择然后更改功能不起作用。请有人能指出我在这里可能做错了什么吗？非常感谢。这是我的代码： 

    <html>
    <head>
    <title>the title</title>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   <script type="text/javascript" language="javascript">
$(document).ready(function(){
$(document).on('change','.name',function(){
        calculateSum();
    });

    $(document).on('click','.del',function(){
        calculateSum();
    });
});


          function calculateSum() {
          $.post(
             "data.php",
             $(".name").serialize(),
                 function(data) {
                $('#stage1').html(data);
             }
          );
      }


   </script>
<script type="text/javascript" language='javascript'>
/*
This script is identical to the above JavaScript function.
*/
var ct = 1;

function new_link()
{
    ct++;
    var div1 = document.createElement('div');
    div1.id = ct;

    // link to delete extended form elements
    var delLink = '<div class="del" style="text-align:right;margin-top:-20px"><a href="javascript:delIt('+ ct +')">Delete</a></div>';

    div1.innerHTML = document.getElementById('newlinktpl').innerHTML + delLink;

    document.getElementById('newlink').appendChild(div1);

}
// function to delete the newly added set of elements
function delIt(eleId)
{
    d = document;

    var ele = d.getElementById(eleId);

    var parentEle = d.getElementById('newlink');

    parentEle.removeChild(ele);

}
</script>
</head>
<body>
   <div id="stage1" style="background-color:blue; color: white">
          STAGE - 1
   </div>

<form id="testform">
<div id="newlink">
 <table>
 <tr>
 <td><p>Fruit:</p></td>
 <td>
     <select class="name" name="name[]">
         <option>Apple</option>
         <option>Mango</option>
         <option>Orange</option>
         <option>Banana</option>
     </select>
 </td>
</tr>
</table>
</div>
    <input type="button" value="Add" onclick="javascript:new_link()"/>
</form>
    <div id="newlinktpl" style="display:none">
        <table>
        <tr>
 <td><p>Fruit:</p></td>
 <td>
     <select class="name" name="name[]">
         <option>Apple</option>
         <option>Mango</option>
         <option>Orange</option>
         <option>Banana</option>
     </select>
 </td>
</tr>
        </table>
    </div>
</body>
</html>

php代码：

<?php
$fruit=$_REQUEST["name"];
$n = count($fruit);


for($i=0;$i<$n; $i++)
{
    echo $fruit[$i]."<br/>";
}
?>
4

2 回答 2

0

jQuery FAQ 文档很好地描述了您的情况。

http://docs.jquery.com/Frequently_Asked_Questions#Why_doesn.27t_an_event_work_on_a_new_element_I.27ve_created.3F

您需要使用事件委托来将事件绑定到代码运行时不存在的未来元素。

使用on()方法并将事件绑定到将始终存在的元素或文档本身。

$(document).on('change','.name', function(){

/* your code here*/
})

API 参考： http ://api.jquery.com/on/

于 2012-10-10T11:00:06.550 回答
0

有几种方法可以解决这个问题，但由于您使用的是 jQuery，因此最简单的方法是使用.on('change','selector',[function]);而不是直接绑定change侦听器。当然，最好的方法是.delegate, 或 -in “纯” JS：

document.body.addEventListener('change',function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() === 'select' && target.className.match(/\bname\b/))
    {
        theActualHandler.apply(target,[e]);//calls the actual handler, this will point to the changed element, and the event object is passed as an argument.
    }
},false);

委派事件意味着您正在侦听 DOM 中某处发生的事件。当它发生时，您可以检查该事件是否指向满足某些条件的元素：在这种情况下，它是一个select元素，它有一个名为 的类name。从那里开始，这只是调用实际处理程序的简单问题。使用.apply允许您将上下文设置为已更改的元素并将事件对象传递给同一函数。那么，该函数的行为将与您直接绑定处理程序时完全相同。
不过，就目前而言，jQuery.delegate做的事情几乎一样，而且会更熟悉，所以我建议你使用它:)

链接：

于 2012-10-10T11:03:02.133 回答