2015-04-04 44 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')); 
}); 
});