2012-11-27 30 views
2

即時通訊jquery和twitter引導新手,所以請原諒愚蠢的問題。使用jquery訪問twitter引導模態內容

我有一個MVC視圖,它設置了一個twitter bootstrap模式,並且這個視圖中的鏈接也被輸出。

我想用模式的數據遠程加載模式與MVC局部視圖的內容。

我已經很好地工作了。

但我後來想要做的就是能夠通過主視圖中的jquery訪問元素(從部分視圖),即使我確定我已經有了選擇器,但它並不像預期的那樣工作。

例如我有一個href鏈接,我嘗試分配給click事件,但是這不會觸發。

但是,如果我將腳本移動到局部視圖中輸出,並拉到模態體中,那麼腳本確實可以工作並且可以處理單擊事件。

我寧願不必在部分視圖中有腳本(即使引用),我寧願在主視圖中引用一個腳本。

有無論如何能夠訪問遠程加載到模態體中的元素,而無需將腳本放在遠程局部視圖內?

作爲一個補充,我剛剛模擬了一個測試,其中模態不使用數據遠程,並且錨點href直接插入到模態體中,並且這樣做我仍然無法訪問此錨點。點擊主頁面上的點擊事件。 任何建議非常讚賞。

做更多的研究,我已經找到答案了下面的帖子 How to set the input value in a modal dialogue?

這似乎暗示了jQuery選擇還應包括.modal體 所以我從下面的改變了我的選擇:

$("#TestButton").click(function (ev) { 
     ev.preventDefault() 

     alert('Test Button Clicked'); 
    }) 

爲我有這個原廠

$(".modal-body #TestButton").click(function (ev) { 
     ev.preventDefault() 

     alert('Test Button Clicked'); 
    }) 

現在click事件觸發lly預計。

但是現在我不確定爲什麼我需要.modal-body作爲jquery選擇器的一部分。有人能解釋這一點嗎?

回答

1

當新的動態內容加載到DOM中時,您需要將點擊事件連接到href。

當頁面加載時,JQuery將通過DOM查看$(「#TestButton」),並且在發生這種情況時沒有發現動態內容尚未注入。

有幾種方法可以處理這個問題......首先,您可以使用JQuery延遲點擊事件的連線,直到新內容被注入,或者您可以使用JQuery的.live功能。

您的代碼將是:

$("#TestButton").live('click', function (ev) { 
     ev.preventDefault() 

     alert('Test Button Clicked'); 
    }); 

其實...這似乎活現在已經貶值在jQuery 1.7

它是...

$("#TestButton").on('click', function (ev) { 
      ev.preventDefault() 

      alert('Test Button Clicked'); 
     }); 

希望這有助於。

0

通過在單擊的元素上使用HTML 5數據屬性並偵聽模態show事件,您可以在引導程序3中操作遠程內容模式的內容。

http://jsfiddle.net/dbasch/UbpS6/


/main.html

<a data-toggle="modal" href="/remote.html" data-target="#myModal" data-merchant-name="Bob's House of Pancakes">Click me !</a> 

<!-- Modal --> 
<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">Modal title</h4> 

      </div> 
      <div class="modal-body"> 
       <div class="te"></div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 

<script type="text/javascript"> 

// we can't use the show.bs.modal or loaded.bs.modal events 
// because the remote modal content is not accessable in the DOM 
// when those events trigger 

// when the remote modal content is shown 
$('#myModal').on('shown.bs.modal', function (e) { 

    // get a data attribute value from the clicked element 
    var merchantName = $(e.relatedTarget).data('merchant-name'); 

    // and set the content of the shown remote modal 
    $('#myModalLabel').text(merchantName); 

}); 

// cleanup the content of the hidden remote modal because it is cached 
$('#reservationModal').on('hide.bs.modal', function (e) { 

    $(this).removeData('bs.modal'); 

}); 

</script> 

/remote.html

<div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span> 

     </button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 

    </div> 
    <div class="modal-body"> 
     <!-- start slipsum code --> 
     <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p> 
     <!-- please do not remove this line --> 
     <div style="display:none;"> 
<a href="http://slipsum.com">lorem ipsum</a> 
     </div> 
     <!-- end slipsum code --> 
    </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>