jQuery:blur()无法动态添加行

时间:2017-01-12 07:58:25

标签: jquery

调用Blur事件后,应显示警告框。

模糊事件适用于默认行,但不适用于动态添加的行。

我甚至尝试了班级选择器,但没有工作。

HTML:

<table  class="test">
     <tr><td><input type="button" value="Add" class="plusbtn" /></td>
     <td><input type="button" value="Remove" class="minusbtn" /></td></tr>
<tr><th>Fname</th><th>Lname</th>
</tr>
<tr>
    <td><input type='text' id="Fname" ></td>
    <td><input type='text' id="Lname"  ></td>
</tr>
    </table>

Jquery的:

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
       var markup = "<tr><td><input type='text' id='Fname' ></td><td><input type='text' id='Lname'></td></td></tr>";
          $('.plusbtn').click(function() {
            $(".test").append(markup);
        });
        $('.minusbtn').click(function() {
            if($(".test tr").length != 1)
                {
                    $(".test tr:last-child").remove();
                }
           else
                {
                    alert("You cannot delete first row");
                }
        });
        var $Fname=$("#Fname");
        var $Lname=$("#Lname");

        $('#Fname').on('blur',function(){

            alert($Fname.val())
        });
    });
</script>

我无法解决问题。请提出建议。谢谢。

1 个答案:

答案 0 :(得分:2)

每次舔都有相同的ID,这不起作用。

此外,您将事件绑定到动态元素错误:

$(static_element).on('event', 'dynamic_element', function)

$(document).on('blur', '.Fname', function () {});