javascript - 似乎无法引用动态添加的字段

Question

我有将列表项添加到无序列表的代码，并且与每个列表项关联的是一个按钮，用户可以单击该按钮将该项目从列表中删除。这是动态发生的(即，他们从模式屏幕中选择需要添加回此无序列表的内容)。通常该项目的值只是一个 int。在这种情况下，我的代码一切正常。

但是，如果该项目的值是一个字符串(因为有时我需要处理表示为一个项目的多个 id)，则删除不会执行任何操作。

所以在运行时它可以生成像这样的html(从firebug中抓取)

<ul id="AgencySpecialism-selected-items" class="multi-select multi-select-selector">
 <li>
<label>Spec 1/Spec 2</label>
<input id="AgencySpecialism-3|1" type="hidden" value="3|1" name="AgencySpecialism-3|1">
<button title="Clear selection" style="width: 28px;" onclick="AgencySpecialism_clear('3|1');return false;"> X </button>
</li>
</ul>

我的javascript清除函数是:

function <%= ViewData["ControlId"] %>_clear(id) {   

        <% if (Model.MultiSelectMode) { %>
        alert('#<%= Model.ControlId %>-' + id);   
        alert($('#<%= Model.ControlId %>-' + id).val());
            $('#<%= Model.ControlId %>-' + id).closest('li').remove();            
            $('#<%= Model.ControlId %>_SelectedSpecialisms').val($('#<%= Model.ControlId %>_SelectedSpecialisms').val().replace(id + ",", ""));
        <% } else { %>

第一个警报显示

#AgencySpecialism-3|1

显示第二个警报

Undefined

所以它看起来像是在说控件不存在 - 但基于 html 标记 - 它确实存在......？!

所以我的最终结果是我需要这条线像它应该的那样工作:

$('#<%= Model.ControlId %>-' + id).closest('li').remove();

如果我要通过

AgencySpecialism_clear(4)

或

AgencySpecialism_clear('4')

然后清除工作将按预期进行。唯一的区别似乎是管道分隔而不是单个值:(

任何想法将不胜感激。我什至尝试将实际呈现的 id 复制并粘贴到clear方法中..但它仍然认为其 val 未定义。

编辑 - 对于其中抛出的 .net mvc 内容感到抱歉 - 但问题与它的 jquery 部分有关:)

Answer 1

威廉是对的，你需要逃离管道:

<div id="test|1">Test</div>

alert($('#test\\|1').html());

你会想做:

'#<%= Model.ControlId %>-' + id.replace("|", "\\|")

http://jsfiddle.net/ryyzp/1/

双反斜杠是因为你需要有'\|'在 jQuery 选择器中，所以你实际上用第一个转义了第二个黑斜杠。