Question

我使用材质设计精简版，并通过get（）jquery方法创建弹出窗口。当我获得弹出元素时，mdl文本字段单击“不起作用”。但是如果我在页面加载工作时加载弹出窗口。

我正在加载de css文件和js。我认为问题是在加载js之后加载元素但是我该如何解决？我过去就这样做了，并没有遇到这个问题。

加载弹出窗口后，我在控制台中没有任何错误。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="input">
    First Name: <br/>
    <input type="text" name="firstName"/><br/>

    Last Name: <br/>
    <select id="lastName" style="text-align: center;">
    </select><br/>

    <p>Date of Birth:</p><br />

    Day: <br/>
    <select id="dayDropDown" style="text-align: center;">
    </select><br/>
    Month: <br/>
    <select id="monthDropDown" style="text-align: center;">
    </select><br/>
    Year: <br/>
    <select id="yearDropDown" style="text-align: center;">
    </select><br/>

    Country: <br/>
    <input type="text" name="country"/><br/>
</form>
<br/>
<button id="submit" type="button">Submit</button>

解：我必须添加此行来升级DOM，因为无法识别之后加载的元素。

 function create(){
 $( "#create" ).click(function(e)
 {
   e.preventDefault();
   var linkPopup = $(this).attr('data-popup');
   $.get(linkPopup, function(response)
   {
      $( ".opacity" ).css("display","block");
      $( ".popup" ).css("display","block");
      $('.popup').html(response);
      $(".popup-close i").click(function()
      {
         $( ".popup .mdl-card" ).remove();
         $( ".popup" ).css("display","none");
         $( ".opacity" ).css("display","none");
      });
   });
 });
}

感谢＆＃39; S

Answer 1

将动态HTML添加到DOM后附加事件处理程序。

$.get( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
  //attach click event handlers here
  create();
});

或者使用.on将事件处理程序附加到父级和委托上因此，在附加事件时，只应附加wchcih事件的父元素，#create可以在以后添加，单击事件将代表团对此进行研究。

$( "body" ).on( "click", "#create", function() {
  //click event triggered
});

MDL - 使用$ .get（）加载视图时文本字段不起作用

1 个答案: