Chrome中无法获取$(this).parent()值的技术求助

页面结构 #

<h3 id="searchLabel">Select User(s)</h3>
<div class="scrollArea" id="resultsPane" name="resultsPane" >
</div>

scrollArea内动态生成的内容 #

<div value=""" & ajaxRS("userid") & """ alt=""" & ajaxRS("fullname") & """>
<span class=""buttonlink minibutton"">Select</span>
<b>" & ajaxRS("fullname") & "</b><br/>
Employer: " & ajaxRS("employer") & ",&nbsp;Location: " & ajaxRS("location") & "</div>

原问题代码（存在兼容问题） #

$(".scrollArea .buttonlink").live("click", function () {
    objClicked = $(this).parent();
    $("#pendAssignments").append($(objClicked).attr("alt") + "  "); objClicked.hide();
    $("#relToSave").append(
"<input name=\"usersToAssign\" value=\"" + $(objClicked).val() + "\">"  
    );
    alertSuccess();
    <% if instancing = "S" or sMode = "EDIT" then %>
    $(".scrollArea .buttonlink").hide(); 
    $("#loadAllUsers").hide();
    $(".scrollArea").fadeTo("fast", 0.35);
    <% end if %>
    <% if aid > 30000 then %>
    $("#bNotify").show();
    <% end if %>
});

问题说明 #

这段代码在IE中可正常运行，但在Chrome中返回空对象。因live()已被废弃，尝试用on()替代未成功，原生JS也无法获取对象值，需解决跨浏览器兼容的动态元素事件绑定问题。

解决方案 #

1. 修正HTML语法错误 #

动态生成的span标签class属性存在引号重复问题，这会导致Chrome无法正确识别类名，先修正：

<div value=""" & ajaxRS("userid") & """ alt=""" & ajaxRS("fullname") & """>
<span class="buttonlink minibutton">Select</span>
<b>" & ajaxRS("fullname") & "</b><br/>
Employer: " & ajaxRS("employer") & ",&nbsp;Location: " & ajaxRS("location") & "</div>

2. 用on()实现正确的事件委托 #

live()废弃后，必须将事件绑定到页面加载时就存在的静态父元素，通过委托机制监听动态元素的事件：

// 绑定到静态父元素#resultsPane（scrollArea的id）
$("#resultsPane").on("click", ".buttonlink", function () {
    var objClicked = $(this).parent(); // 用var声明变量，避免全局污染
    var userId = objClicked.attr("value"); 
    var fullName = objClicked.attr("alt");

    $("#pendAssignments").append(fullName + "  ");
    objClicked.hide();

    $("#relToSave").append(
        '<input name="usersToAssign" value="' + userId + '">'  
    );

    alertSuccess();

    <% if instancing = "S" or sMode = "EDIT" then %>
    $(".scrollArea .buttonlink").hide(); 
    $("#loadAllUsers").hide();
    $(".scrollArea").fadeTo("fast", 0.35);
    <% end if %>

    <% if aid > 30000 then %>
    $("#bNotify").show();
    <% end if %>
});

3. 规范属性使用（彻底解决Chrome取值为空问题） #

Chrome等标准浏览器不识别div的value、alt这类非原生属性，建议改用HTML5标准的data-*自定义属性，避免解析兼容问题：

修改动态生成的div：

<div data-userid=""" & ajaxRS("userid") & """ data-fullname=""" & ajaxRS("fullname") & """>
<span class="buttonlink minibutton">Select</span>
<b>" & ajaxRS("fullname") & "</b><br/>
Employer: " & ajaxRS("employer") & ",&nbsp;Location: " & ajaxRS("location") & "</div>

对应修改JS取值逻辑：

var userId = objClicked.data("userid"); 
var fullName = objClicked.data("fullname");

以上修改后，代码可在Chrome、Firefox、IE9+等所有现代浏览器中正常运行，同时规避了非标准属性的兼容风险。

内容的提问来源于stack exchange，提问作者pmcs