Question

以下是我正在尝试的小提琴。基本上我想在输入字段的值发生变化时将动态附加的跨度更新到预览div。输入的值在警报中可用，但似乎没有更新范围。我也觉得奇怪的是，如果您只是选择带有动态生成ID的范围并提醒文本，那么它没有任何价值。有什么想法吗？我正在避免使用淘汰赛来获得它的价值。

http://jsfiddle.net/Wr3t7/4/

$(document).ready(function(){
     $(".project").each(function(index, value){
         var titleElem = $(this).find(':nth-child(1)');
         var projId = "#" + titleElem.attr('id') + "_Prev";

         $("#previews").append("<span id='" + projId + "'>" + titleElem.val() + "</span><br/>");

         titleElem.keyup(function(){
             alert($(this).val());
             $(projId).text($(this).val()); 
         });
     });
 });

目标是我希望这个逻辑能够处理可能出现在视图上的任意数量的项目div。

Answer 1

几乎没有工作

1）[]不允许在您拥有的ID中，因为它们是为attribute selectors保留的。
2）初始化字符串变量时设置#无效 3）将文本设置为<span>直接无效，您需要编写#来选择<span>对象。

所以组合你的所有代码应该是这样的：

正如您所说，标记是由MVC代码生成的，您可以使用正则表达式

创建span的新ID

var newProjIdID =  projId.replace(/[^\w\s]/gi, ''); // Generating valid ID

所以最终的答案将是：

<强>的jQuery

$(".project").each(function(index, value){
        var titleElem = $(this).find(':nth-child(1)');
        var projId = titleElem.attr('id') + "_Prev";
        var newProjIdID =  projId.replace(/[^\w\s]/gi, ''); // Generating valid ID
        $("#previews").append("<span id='" + ID + "'>" + titleElem.val() + "</span><br/>");

        titleElem.keyup(function(){
            alert($(this).val());
            $("#" + ID).text($(this).val()); 
        });
    });

Fiddle Demo

Answer 2

jquery选择器是非常正则的表达式，所以你需要转义括号：

http://jsfiddle.net/Wr3t7/14/

<body>
    <div id="projects">
        <div class="project">
            <input type="text" id="ProjectViewModel_[0]_Title" value="Title1"/>
        </div>

        <div class="project">
            <input type="text" id="ProjectViewModel_[1]_Title" value="Title2"/>
        </div>
    </div>

    <div id="previews">

    </div>
</body>

$(document).ready(function(){
    $(".project").each(function(index, value){
        var titleElem = $(this).find(':nth-child(1)');
        var projId = titleElem.attr('id') + "_Prev";

        $("#previews").append("<span id='" + projId + "'>" + titleElem.val() + "</span><br/>");

        titleElem.keyup(function(){
            $("#" + projId.replace('[', '\\[').replace(']','\\]')).text($(this).val()); 
        });
    });
});

Answer 3

你有两个问题：

您正在将附加范围的ID设置为#foo（即将哈希作为ID的一部分包含在内）
id中的方括号虽然在HTML 5中有效，但我认为这是令人困惑的jQuery

如果你不能改变输入的id，至少在跨度上改变它们

$(document).ready(function(){
    $(".project").each(function(index, value){
            var titleElem = $(this).find(':nth-child(1)');
            var projId = titleElem.attr('id').replace('[', '_').replace(']', '_') + "_Prev";

            $("#previews").append("<span id='" + projId + "'>" + titleElem.val() + "</span><br/>");

            titleElem.keyup(function(){
                alert($(this).val());
                $('#' + projId).text($(this).val()); 
            });
    });
});

Working fiddle

JQuery Update在输入字段Keyup上动态附加Span

3 个答案:

Fiddle Demo