点击jQuery

Question

我有这个下拉列表：

<div id="change_booking_status" data-booking-id="99">
    <div class="btn-group btn-block">
        <a class="dropdown-toggle" data-toggle="dropdown">Open <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a data-status="Open">Open</a></li>
            <li><a data-status="Close">Close</a></li>
            <li class="divider"></li>
            <li><a data-status="Cancel">Cancel</a></li>
        </ul>
    </div>
</div>

在每次更改时，我都应用此代码：

$('#change_booking_status').on('click', 'div > div > ul > li a', function() {
    alert('aa');
    var text = $(this).text();
    var status = $(this).data('status');
    var bid = $('#change_booking_status').data('booking-id');

    $('#change_booking_status > div > a.dropdown-toggle').html(text + ' <span class="caret"></span>');
    $.ajax({
        type : 'POST',
        data : 'BOO_Id='+bid+'&BOO_Status='+status,
        url  : 'assets/php/ajax/booking_status_edit.php',
        success: function(responseText){
            //alert('Success');
        }
    });
});

问题是这段代码没有做任何事情。

对此有何帮助？

谢谢，

Answer 1

选择器中的第二个div并不存在于html

中

尝试更改为

$('#change_booking_status').on('click', 'div > ul > li a', function() {

或稍后更容易阅读/理解

$('#change_booking_status').on('click', 'ul.dropdown-menu > li a', function() {