弹出窗体不适用于jquery内容加载

Question

我使用jquery加载我的内容。但是当加载内容时，我的弹出窗体会被破坏（显示在页面中）。

我检查了类似的问题，但我似乎无法找到可行的修复方法。

我应该切换到iframe加载吗？或者有办法修复我的模态弹出窗口吗？

内容加载脚本：

    <script>
    $(document).ready(function(){
           var trigger = $('nav ul li a'),
           container = $('#content'); 

           trigger.on('click', function() {
               var $this = $(this)
               target = $this.data('target');

           container.load(target + '.php');
           return false;
           });
           });
    </script>

模态弹出窗口的

脚本：

      <script>
      $( function() {
        $( "#inquireForm" ).dialog({
          autoOpen: false,
          width: 500,
          modal: true,
          resizable: false,
          autoResize: true,
          show: {
            effect: "clip",
            duration: 800
          },
          hide: {
            effect: "drop",
            duration: 800
          }
        });

        $( "#submitForm" ).on( "click", function() {
          $( "#inquireForm" ).dialog( "open" );
          return false;
        });
      } );
      </script>

         <div id="inquireForm" title="Contact Us">
        <form action="test.php">
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="firstname" placeholder="Your name..">
            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lastname" placeholder="Your last name..">
            <label for="email">Email Address</label>
            <input type="text" id="email" name="email" placeholder="Your email address..">
            <label for="number">Contact Number</label>
            <input type="text" id="number" name="contactnumber" placeholder="Your contact number..">
            <label for="project">Project</label>
            <select id="project" name="project">
            <option value="select" label="<--Select a project-->"></option>
            <option value="dasma">Dasma</option>
            <option value="clover">Clover</option>
            <option value="other">Others</option>
          </select>
            <label for="subject">Subject</label>
            <textarea id="subject" name="subject" placeholder="How may we help you?" style="height:200px"></textarea>
            <img id="captcha" src="securimage/securimage_show.php" alt="CAPTCHA Image" style="float: right; padding-left: 10px; height: 50px;" />
            <input type="text" name="captcha_code" size="10" maxlength="6" style="float: right; width: 110px;" placeholder="Enter Captcha" />
            <!--    <a href="#" style="float: right; padding-right: 10px; text-align: center;" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false"> <br />[ Different Image ]</a>-->

            <input type="submit" value="Submit">
          </form>
      </div>
        <button id="submitForm">Inquire Now!</button>
      </div>