jQuery 选择器 不能选择匿名函数里创建的jquery对象吗?

 function init() {
   $('.new_button').click(function () {
    var $html = $( 
  '<div class="new_con">' + 
    ' <div class="con con1"> ' +
          ' <input type="text" value="这里是标题" onclick="this.select()"/> ' +
    '</div>' +

    '<div class="con con2">' +
          '<div class="add_qs">+     添加问题</div>' +
    '</div> '  +

     
    '<div class="con3">' +
          '<span>问卷截止日期 &nbsp <input type="text"  id="calendar" /> </span>' +
          '<span class="btn sav_btn" >保存问卷</span>' +
          '<span class="btn rel_btn">发布问卷</span>' +
     '</div>' +
'</div>'
);
    $('.con_bg').empty().append($html)
      });  

 $(".con1 input[type=text]").keydown(function (e) {
      console.log(e.target)
      if(e.keyCode == 13) {
          console.log(e.keyCode)
          $(this).blur();
      }
  })

事实证明⑨这一段完全没有作用,但是如果不是访问里面的对象的话,比如$('body')却是可以做选择器来访问的。
讲道理的话,即便$html 是局部变量但是已经被添加进入了dom里面,应该可以访问啊?

阅读 3.3k
3 个回答

问题出在这里:这个keydown事件在绑定时,.con1这个元素还不在DOM中。为了实现对页面第一次渲染完成之后被js动态生成的元素做事件绑定,要用jquery的on()方法:

$(".con1 input[type=text]").on('keydown', function (e) {
      console.log(e.target)
      if(e.keyCode == 13) {
          console.log(e.keyCode)
          $(this).blur();
      }
  })
$(".con_bg").on('keydown', 'input[type=text]', function (e) {
  console.log(e.target)
  if(e.keyCode == 13) {
      console.log(e.keyCode)
      $(this).blur();
  }
})

要有效果的前提条件:
.con1 input[type=text]这个元素必须存在,事件回调注册才能成功,相应的事件回调在keydown事件发生后被执行

1种采用 @林岑影 的方法,使用事件代理机制
第2种方法,在.new_button的click事件回调函数中注册

function init() {
   $('.new_button').click(function () {
    var $html = $( 
  '<div class="new_con">' + 
    ' <div class="con con1"> ' +
          ' <input type="text" value="这里是标题" onclick="this.select()"/> ' +
    '</div>' +

    '<div class="con con2">' +
          '<div class="add_qs">+     添加问题</div>' +
    '</div> '  +

     
    '<div class="con3">' +
          '<span>问卷截止日期 &nbsp <input type="text"  id="calendar" /> </span>' +
          '<span class="btn sav_btn" >保存问卷</span>' +
          '<span class="btn rel_btn">发布问卷</span>' +
     '</div>' +
'</div>'
);
    $('.con_bg').empty().append($html);
    addCon1KeyDownListener();
});  

function addCon1KeyDownListener(){
    $(".con1 input[type=text]").keydown(function (e) {
      console.log(e.target)
      if(e.keyCode == 13) {
          console.log(e.keyCode)
          $(this).blur();
      }
  });
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题