Wsrtjtyk

I'm able to clone a new modal and launch it.

However, is it possible to remotely launch the newly cloned modal via a click or toggle?

Steps I'd like to recreate:

1. User click "Clone" to clone modal




2. Javascript clones modal and renames appropriate tags (button and modal tags)




3. User clicks "remote modal 2 trigger" to remotely trigger "launch demo modal 2" button

Here is the fiddle: http://jsfiddle.net/hde13s2t/33/

The "Launch Demo Modal 2" button works if clicked directly. But, it does not trigger if "Remote Modal 2 Trigger" is clicked.

The answer must be remote, as I'll be setting up triggers for many different modals.

Below is my javascript:

$(document).on("click", "#clicktoclone", function() {

    var secondmodal = $("#launchmodal1").clone();



  // updating button id and data-target for modal 2

  secondmodal.find("#examplemodalbutton1").attr("id", "examplemodalbutton2").attr("data-target", "#exampleModal2").html("Launch demo modal 2");



  // updating modal id for modal 2

  secondmodal.find("#exampleModal1").attr("id", "exampleModal2");



  secondmodal.appendTo('#launchmodal2');



    // set new click event to show the cloned modal

});



  $(document).on('click', '.launchmodal', function() {

    var targetSelector = $(this).data('target');

    $(targetSelector).modal();

  });



  $(document).on('click', '#remotemodal', function() {

    var targetSelectorid = $(this).attr("value");

    $("#exampleModal"+targetSelectorid).trigger("toggle");

  });

Below is html

<div id="launchmodal1">



  <button type="button" class="launchmodal btn btn-primary" data-toggle="modal" id="examplemodalbutton1" data-target="#exampleModal1">

    Launch demo modal 1

  </button>



  <!-- Modal -->

  <div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

    <div class="modal-dialog" role="document">

      <div class="modal-content">

        <div class="modal-header">

          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

          <button type="button" class="close" data-dismiss="modal" aria-label="Close">

            <span aria-hidden="true">&times;</span>

          </button>

        </div>

        <div class="modal-body">

          ...

        </div>

        <div class="modal-footer">

          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

          <button type="button" class="btn btn-primary">Save changes</button>

        </div>

      </div>

    </div>

  </div>

 </div>

</div>

<button type="button" class="btn btn-secondary" id="clicktoclone">Clone</button>



<div id="launchmodal2"><BR><BR>

<button type="button" class="btn btn-success" id="remotemodal" value="2">Remote modal 2 trigger</button>

</div>

You have done it all correct, except for the function to open the cloned modal.

In your #remotemodal click event handler, instead of:

$("#exampleModal"+targetSelectorid).trigger("toggle");

Use:

$("#exampleModal"+targetSelectorid).modal("show");

Optionally, if you want to simulate clicking the Launch demo modal 2 button like a user (more related to your question), swap the above line out for:

$("#examplemodalbutton"+targetSelectorid).trigger("click");