Question

所以我有一个用Jquery创建的手风琴菜单：

    <script>
$(document).ready(function() {
/*Accordian Script for the Request New Appraisal Panel*/
$('.accordian_item').hide();
$('.accordian_item').first().slideDown();

$('.accordian_trigger').click(function(event) {
    event.preventDefault();
    $(this).parent().find('.accordian_item').slideToggle();
});
});
</script>

现在，我希望能够动态地将额外的手风琴项添加到手风琴盒中，我这样做了：

<script>

$('#add_contact_btn').click(function(event) {
    event.preventDefault();

    var large = '<div class="accordian_container"><a href="#" class="accordian_trigger"><h4>Co-Borrower Information</h4></a><hr/><div class="accordian_item"><label> First Name</label><br/><input type="text"/><br/><label>Middle Name</label><br/><input type="text"/><br/><label>Last Name</label><br/><input type="text" /><br/><label>Home Number</label><br/><input type="text"/><br><label>Work Number</label><br/><input type="text"/><br><label>Cell Number</label><br/><input type="text"/><br></div></div>';

    $('#accordion_container_box').append(large);


});
</script>

这非常有效，但单击折叠按钮时动态生成的项目不会折叠。现有的手风琴项目仍然有效。出于某种原因，似乎Jquery不会触发动态创建的链接。我有什么想法可以纠正这个问题吗？

BTW，这是基本的HTML结构：

<div id="accordion_container_box">

            <div class="accordian_container">
                <a href="#" class="accordian_trigger"><h4>Borrower's Information</h4></a>
                <hr/>
                <div class="accordian_item">
                <label> First Name</label><br/>
                <input type="text"/><br/>
                <label>Middle Name</label><br/>
                <input type="text"/><br/>
                <label>Last Name</label><br/>
                <input type="text" /><br/>
                <label>Home Number</label><br/>
                <input type="text"/><br>
                <label>Work Number</label><br/>
                <input type="text"/><br>
                <label>Cell Number</label><br/>
                <input type="text"/><br>
                </div>
            </div>

            <div class="accordian_container">       
                <a href="#" class="accordian_trigger"><h4>Co-Borrower's Information</h4></a>
                <hr/>
                <div class="accordian_item">
                <label> First Name</label><br/>
                <input type="text"/><br/>
                <label>Middle Name</label><br/>
                <input type="text"/><br/>
                <label>Last Name</label><br/>
                <input type="text" /><br/>
                <label>Home Number</label><br/>
                <input type="text"/><br>
                <label>Work Number</label><br/>
                <input type="text"/><br>
                <label>Cell Number</label><br/>
                <input type="text"/><br>
                </div>
            </div>

        </div>

            <a href="#" id="add_contact_btn">+ Additional Contact</a>

Answer 1

你必须使用.live（'click'...动态创建的内容。

Answer 2

默认情况下，将事件绑定到元素只会影响绑定运行时存在的节点。通过使用事件委派，您可以利用事件冒泡的内置方式。 jQuery＆lt; 1.7使用delegate和live方法执行此操作，jQuery 1.7添加了on方法以在单个API中合并所有事件处理程序。

例如，您可以使用以下内容来处理类accordian_trigger的节点上的所有点击，无论它们何时被创建。

$(document).on('click', '.accordian_trigger', function() {
    //whatever you need to do
});

这样做会将onclick事件处理程序附加到document本身。当DOM中发生任何点击时，它将从事件发生的节点冒泡到其父节点及其父节点，直到它到达document。然后，jQuery将检查事件是否发生在与作为on的第二个参数传入的选择器匹配的节点上，在这种情况下，它将检查该节点是否具有accordian_trigger类。如果是这样，它将运行作为第三个参数传入的function。

为了提高效率，您可能希望将document替换为您知道将包含所有accordian_trigger个节点的父节点。否则所有点击一直到document，并检查点击的节点是否有accordian_trigger类，这可能很贵，特别是如果你有大DOM。

手风琴+附加内容Jquery

2 个答案: