如何使用具有相同名称的“data-target”属性创建多个弹出窗口

时间:2016-02-10 09:39:43

标签: javascript jquery twitter-bootstrap twitter-bootstrap-3

我正在使用bootstrap使用data-target属性创建多个弹出模型。

像:

<a class="result-right-icon" id="createNewFolder" data-target="#Favorites_Modal" data-toggle="modal" href="" data-keyboard="false" data-backdrop="static">Favorites</a>


<a class="result-right-icon" data-target="#recentview_Modal" data-toggle="modal" href="" data-keyboard="false" data-backdrop="static">Recent View</a>




 <div class="modal fade" id="Favorites_Modal" role="dialog">
    <div class="modal-dialog modal-sm sr_popup">

       <div class="modal-content sr_popup_content">
          <div class="modal-header sr_pop_heading">

          </div>
          <div class="modal-body">
           <a id="createNewFolder" data-target="">Open Popup </a>
          </div>
       </div>

    </div>
 </div>


     <div class="modal fade" id="recentview_Modal" role="dialog">
    <div class="modal-dialog modal-sm sr_popup">

       <div class="modal-content sr_popup_content">
          <div class="modal-header sr_pop_heading">

          </div>
          <div class="modal-body">
           <a id="createNewFolder" data-target="">Open Popup </a>
          </div>
       </div>

    </div>
 </div>

现在工作正常,但我不想使用多个数据目标属性和多个弹出模型div。

我尝试只使用所需弹出窗口的一个数据目标属性名称,我想用ajax响应替换弹出内容。

现在我尝试将我对现有弹出窗口的响应替换,但确实失败了。

$(document).delegate('#createNewFolder', 'click', function(){ 
        createNewSaveDocFoldView(); 
}); 
function createNewSaveDocFoldView(){ 
        jQuery.post(createNewFoldURL).success(function(response){ 
                //$('#Favorites_Modal').html(""); 
                $('#Favorites_Modal').empty(""); 
                $('#Favorites_Modal').html(response); 
        }).error(function(){ 
        }); 
}

1 个答案:

答案 0 :(得分:1)

您必须在此行之后触发DOM点击事件:

$('#Favorites_Modal').html(response); 
$('#createNewFolder')[0].click(); // <-----this would trigger it.

我不确定.delegate()方法是否有效。相反,首选的事件委派方式是.on()方法:

$(document).on('click', '#createNewFolder', createNewSaveDocFoldView);

function createNewSaveDocFoldView(){ 
    jQuery.post(createNewFoldURL).success(function(response){ 
            //$('#Favorites_Modal').html(""); 
            $('#Favorites_Modal').empty(""); 
            $('#Favorites_Modal').html(response); 
            $('#createNewFolder')[0].click(); // <-----this would trigger it.
    }).error(function(){ 
    });


}