0

我正在当前项目上实现 Twitter Bootstrap，并且在$(document). 他们基本上被忽略了。如果我将它们绑定到$("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 错误通常意味着存在选择器问题，但代码确实执行了，所以我完全糊涂了。

任何帮助或指导将不胜感激。

4

3 回答 3

0

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

$(document).click(function(){
    alert('You clicked me!');
});
于 2013-04-21T04:51:48.177 回答
0

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

$(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

于 2013-04-21T04:43:37.397 回答
0

此错误是由于使用 bootstrap 的切换模型属性打开模型弹出窗口，而不是在 mvc 操作链接或 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>
于 2014-04-24T07:31:09.820 回答