新手问题 JS 中事件绑定问题

ckl · 2014年04月04日 · 最后由 ckl 回复于 2014年04月07日 · 2587 次阅读

我做了一个局部刷新的的 ajax。

$("#tpl_exam_category_<%= @category_id%>").html("<%= j render :partial => 'phy_exam_category_item', :collection => Health::PhyExamTpl.find(@phy_exam_tpl_id).phy_exam_tpl_items.group_category(@category_id).sort, :as => :phy_exam_tpl_item %>")

我这个 rander 的是一个 tbody,每一行是有一个编辑和删除连接, 如:edit

$(document).ready ->
  $(".tpl_item_edit_modal").click () ->
    category_item_id = $(this).attr("data-category-item-id")
    tpl_item_id = $(this).attr("data-phy-exam-tpl-item")
    phy_exam_tpl_item_edit category_item_id,tpl_item_id

我怎么帮重新渲染的连接找到之前 DOM 的的节点??????

给楼主一个思路:

  1. 点击编辑按钮
  2. 弹出一个框或者怎样的,对内容进行编辑;
  3. 用 Ajax 提交到后台后直接返回 html 文本;
  4. 用 jQuery 直接 replace 当前被编辑的结点;

另外:

楼主写出来的代码着实恶心!为啥就不能把 html 和 js 代码分开呢!

#1 楼 @hz_qiuyuanxin 我分开写的,只是帖子里看成这样的,前三点我都完成了,问题是第 4 点还不知道!

#2 楼 @ckl

这样的代码不叫分开写啊

$("#tpl_exam_category_<%= @category_id%>").html("<%= j render :partial => 'phy_exam_category_item', :collection => Health::PhyExamTpl.find(@phy_exam_tpl_id).phy_exam_tpl_items.group_category(@category_id).sort, :as => :phy_exam_tpl_item %>")

不是很懂 lz 的描述,按照我自己的理解给出一个解决方案,不知道 lz 是不是这个意思:

  1. 事件委托不要使用 click,用.on() $('tbody').on('click',function(e){ }) 这样的好处是往 tbody 里面添加 dom,也会自动绑定。 2.找到点击的节点,用$(this),对应的 dom 是 e.target $(this).parent().find('xxxx'),即可选定

#3 楼 @hz_qiuyuanxin 这是一个局部刷新的方法

#4 楼 @xlaok 非常谢谢 4 楼的解答。我这边是这样的 和这个网站说的类型http://darkbaby123.iteye.com/blog/769603 controller:

def update_item
    @user =User.find(params[:id])
    respond_to do |format|
      if  @user.update_attributes(user_params) 
        format.html { redirect_to 'edit' }
        format.js
      else
        format.html { render 'edit' }
        format.js
      end
    end
end
    end

views:我有一个 update_item.js.erb

$("#category").html("<%= j render :partial => 'category_item', :collection=>User.get_category(@user) , :as => :category_item %>")

user.js.coffee

$(document).ready ->
  phy_exam_tpl_item_edit = (category_item_id,tpl_item_id) ->
      <<<这里是一系列的操作>>>>
  $(".tpl_item_edit_modal").click () ->
    category_item_id = $(this).attr("data-category-item-id")
    tpl_item_id = $(this).attr("data-phy-exam-tpl-item")
    phy_exam_tpl_item_edit category_item_id,tpl_item_id

我 rander 的是一个表格内容:有编辑、删除操作。我通过以上方法实现局部刷新,但是编辑删除的事件绑定无效了。需要重新绑定相对应的点击事件响应。

问题:我不知道怎么重新绑定,我试了几种都没成功。(重新绑定是写在 user.js.coffee 中还是 update_item.js.erb 中?)

可不可以考虑重新绑定的方法,如这样解决:

function eventListening(){
    $(target).off("click");
    $(target).on("click",function(){
        do what yo want 
    });
}

局部刷新之后再调用这个函数就可以实现重新绑定事件了。

#7 楼 @jablie 谢谢!可以了!非常感谢

需要 登录 后方可回复, 如果你还没有账号请 注册新账号