引导/ jQuery的事件绑定问题

Question

我在目前的一个项目实现Twitter的引导时遇到的时间上的$（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(){ 
      } 
     }); 
    } 
} 

当事件发生时，通过 “身体” 的约束它的工作原理除了控制台继续显示以下错误： 未被捕获的错误：语法错误，不能识别的表达式：/ edit_status/1348 代码的exe可爱很好，但它让我觉得还有一些其他的错误会导致$（document）.on方法不起作用。

我读过的JavaScript错误通常意味着有一个选择的问题，但该代码并执行，所以我彻底糊涂了。

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

Answer 1

不知道，如果你有，你没有显示更多的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

Answer 2

退房quirks mode如何事件冒泡到的解释该文件。所有的事情都是平等的，文档点击处理程序应该可以工作（见fiddle）。在这种情况下，如果一个子节点上的点击处理程序（在本例中是body）停止事件传播。我的猜测是你正在使用的插件之一就是这样做的。尝试使用文档上的点击处理程序制作页面（或使用我的小提琴），并逐个添加插件以查看导致问题的原因。

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

Answer 3

这个错误是由于使用自举的切换模型attribitue打开一个弹出模型， 而不是使用此代码没有任何类，在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>