現在のプロジェクトで 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(){
}
});
}
}
イベントが「本体」を介してバインドされている場合、コンソールに次のエラーが表示され続けることを除いて機能します。
キャッチされないエラー: 構文エラー、認識されない式: /edit_status/1348
$(document).on
コードは正常に実行されますが、アプローチが機能しない原因となっている何か他の問題があると思われます。
Javascript エラーは通常、セレクターに問題があることを意味しますが、コードは実行されるため、完全に混乱しています。
ヘルプやガイダンスをいただければ幸いです。