如何使用具有相同名称的“数据目标”属性创建多个弹出窗口

Question

I am using bootstrap to create multiple popup models using data-target attribute.

Like:

<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>

Now Working fine but i don't want use multiple data-target attribute and multiple popup model div.

I try to use only one data-target attribute name of all popup needed , and i want to replace my popup content with ajax response.

Now i am try to replace my response to existing popup , but did failed.

$(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(){ 
        }); 
}

Answer 1

You have to trigger the DOM click event after this line:

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

I am not sure if .delegate() method is working. Instead the preferred way to event delegation is done by .on() method:

$(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(){ 
    });


}