Question

我正在当前项目上实现Twitter Bootstrap，并且在$（文档）上有一些时间绑定事件处理程序。他们基本上被忽视了。如果我将它们绑定到$（“body”），它们在某种程度上可以正常工作。

这是HTML：

<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    <li><a href="/edit_status/1174" data-toggle="modal"><i class="icon-pencil"></i>  Change Status</a></li>

这是JS：

$(function() {
    $("body").on("click", "a[data-toggle=modal]", on_click_data_toggle);
function on_click_data_toggle(e){
    e.preventDefault();
    var url = $(e.currentTarget).attr('href');
    if (url.indexOf('#') == 0) {
        $(url).modal('open');
    } else {
        $.ajax({
            url: url,
            success: function(data){
                if(data.length > 0)
                {
                    $('<div class="modal hide fade">' + data + '</div>').modal();
                }
            },
            error: function(){
            }
        });
    }
}

当事件通过“body”绑定时，除了控制台一直显示以下错误外，它仍然有效：未捕获错误：语法错误，无法识别的表达式：/ edit_status / 1348 代码执行正常，但它让我觉得还有其他的错误会导致$（document）.on方法不起作用。

我已经读过javascript错误通常意味着存在选择器问题，但代码确实执行了所以我完全糊涂了。

非常感谢任何帮助或指导。

Answer 1

不确定您是否有更多未显示的jQuery代码，但如果没有，则缺少click委托和就绪委托的右括号和括号。我还将您的函数移动为匿名函数：

$(function() {
    $("body").on("click", "a[data-toggle=modal]", function(e){

        e.preventDefault();

        var url = $(this).attr('href');

        if (url.indexOf('#') == 0) {
            $(url).modal('open');
        } else {
            $.ajax({
                url: url,
                success: function(data){
                    if(data.length > 0)
                    {
                        $('<div class="modal hide fade">' + data + '</div>').modal();
                    }
                },
                error: function(){
                }
            });
        }
    });
});

从快速浏览一下，这应该可行。使用像这样的匿名函数（在委托中）使得this指向的更明显（在这种情况下，触发点击事件的锚点）。

FWIW ，模态插件确实有一个remote选项，可能会达到与您在此处尝试的结果相同的结果：http://twitter.github.io/bootstrap/javascript.html#modals

Answer 2

查看quirks mode以获取有关事件如何冒泡到文档的说明。在所有条件相同的情况下，文档点击处理程序应该可以工作（请参阅此fiddle）。如果子节点上的单击处理程序（在本例中为正文）停止事件传播，则不会出现这种情况。我的猜测是你正在使用的一个插件就是这样做的。尝试在文档上创建一个带有单击处理程序的页面（或使用我的小提琴），然后逐个添加插件以查看导致问题的原因。

$(document).click(function(){
    alert('You clicked me!');
});

Answer 3

此错误是由于使用bootstrap的toggle-model属性来打开模型弹出窗口，而不是在没有任何类的情况下使用此代码，在mvc Action链接或htnl页面中。如果您有任何建议，请发送邮件：vishalroxx7@gmail.com

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"></h4>

            </div>
            <div class="modal-body"><div class="te">Please wait...</div></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                @*<button type="button" class="btn btn-primary">Save changes</button>*@
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->








    $(document).ready(function () {
      //  $('.dialog-window').attr("data-target", "#myModal"); // this is used when you oen a single link on a page 
        //   $('.dialog-window').attr("data-toggle", "modal"); /// this is used to attache dyanaic call to anchor tag or action link 


        $("body").on("click", "a.dialog-window", null, function (e)
        {              
            e.preventDefault();


            var $link = $(this); // Reference to <a/> link
            var title = $link.text();// this is title to fetch in htnl    
            $('#myModal .modal-title').html(title);

            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {
                $('#myModal').modal('show');
            }
            else
            {

                $.get(url, function (data) {
                    $('#myModal .te').html(data);
                    $('#myModal').modal();
                }).success(function () { $('input:text:visible:first').focus(); });

            }

        });
    });

</script>

Bootstrap / jQuery事件绑定问题

3 个答案: