2015-04-04 64 views
2

我有一個引導模式,其中有幾個觸發點擊事件的元素。我想獲取觸發事件的元素的id。獲取觸發引導模式隱藏的元素的ID

我試圖使用event.target以及event.relatedTarget,但兩者都不起作用。模態

代碼

<div id="GSCCModal" class="modal fade" 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" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <ul class="nav nav-pills nav-stacked" style="max-width: 300px;"> 
    <li class="active"><a href="javascript:void(0)" data-dismiss="modal" id='link1'>Link 1</a></li> 
    <li><a href="javascript:void(0)" data-dismiss="modal" id='link2'>Link 2</a></li> 
    <li><a href="javascript:void(0)" data-dismiss="modal" id='link3'>Link 3</a></li> 
</ul> 
     </div> 
     <div class="modal-footer"> 
     <button id='btn1' type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

而js代碼是

$(document).on('hidden.bs.modal', '#GSCCModal', function (event) { 
    var target = $(event.relatedTarget); 
    console.log(target.id); 
}); 

回答

0

請嘗試腳本如下

$(document).on('hidden.bs.modal', '#GSCCModal', function (event) { 
    var id = $(this).attr("id") == undefined ? "NO-ID" : $(this).attr("id") ; 
    console.log(id); 
}); 
+0

嗯...你貼將返回模態本身的ID解決方案...我想元素的ID是封閉的模式。就像如果我點擊關閉按鈕和模態隱藏,我應該得到'btn1'作爲結果。 – hs19 2015-04-04 06:06:55

0

我解決了這個通過給普通類的所有元素這會觸發模態隱藏並使用它們的點擊事件。

<div id="GSCCModal" class="modal fade" 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" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <ul class="nav nav-pills nav-stacked" style="max-width: 300px;"> 
    <li class="active"><a href="javascript:void(0)" data-dismiss="modal" id='link1' class="close">Link 1</a></li> 
    <li><a href="javascript:void(0)" data-dismiss="modal" id='link2' class="close">Link 2</a></li> 
    <li"><a href="javascript:void(0)" data-dismiss="modal" id='link3' class="close">Link 3</a></li> 
</ul> 
     </div> 
     <div class="modal-footer"> 
     <button id='btn1' type="button" class="btn btn-default close" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

和js是

$(document).ready(function() { 
    $('.close').on('click', function(event) { 
    console.log($(this).attr('id')); 
}); 
});