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

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 clear 函数是：

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 选择器中，所以你实际上是在用第一个转义第二个黑斜线。