使用jQuery插入到使用jQuery的span中检索数据

时间:2010-11-02 05:27:31

标签: javascript jquery asp.net-mvc

我在客户端点击添加按钮时将一些带有一些文本的div插入到父div标签中。现在我想检索相同的数据客户端,当我试图找到我刚刚使用'id'插入的元素时它返回null。

我希望在客户端获取此信息的一些方法将其发送回控制器上的另一个按钮点击事件我不想在这里使用ajax。我正在使用Asp.net MVC。

感谢您的帮助。

function addActor() {
        var actor = $("#Actor_Name").val();


        var ni = document.getElementById('added_Movies');
        var numi = document.getElementById('theIncrementor');
        var num = (document.getElementById('theIncrementor').value - 1) + 2;
        numi.value = num;
        var newdiv = document.createElement('div');
        var divIdName = 'my' + num + 'Div';
        newdiv.setAttribute('id', divIdName);

        newdiv.innerHTML = "<span id=\"a"+num+"\" style=\"width:150px; float:left;\">" + actor + "</span> &nbsp; <a href=\"javascript:;\" onclick=\"removeActor(\'" + divIdName + "\')\">Remove </a>";
        ni.appendChild(newdiv);
    }

添加按钮

会发生这种情况

在提交时我必须循环以获取所有插入的数据并将其发送给我的控制器。

3 个答案:

答案 0 :(得分:2)

将一个类放到新创建的跨度上,然后使用

获取这些跨度
$("span.classname").each(function(){
    var text = $(this).text();
});

建议

您可以将当前的javascript代码更改为jQuery

答案 1 :(得分:1)

你的代码在这里真的很有帮助,但我会把它放在一边......

$('#parentDiv').append($("<div id='myInsertedDiv'>Hello!</div>"));

$('#myInsertedDiv').html(); // -> "Hello!"

/* OR */

$('#parentDiv div').html() // -> "Hello!"

答案 2 :(得分:1)

依赖innerHTML来检索你的数据很乱(如果你需要为样式或布局添加子元素等,它将返回标记)。我推荐使用jQuery的数据方法(你也混合了native和jquery dom方法,所以我编辑了一下):

function addActor() {
        var self = this;
        var actor = $("#Actor_Name").val();
        var ni = $('#added_Movies');
        var num = $('#theIncrementor').val();
        var newdiv = $('<div id="my'+num+'Div" class="actorDiv"/>')
            .data("actor", actor);
        var newspan = $('<span id="a'+num+'">actor </span>')
            .css({
                "width":"150px", // you should be doing this in an external stylesheet unless you need computed values for these attributes
                "float":"left"
            });
        var removeLink = $('<a href="javascript:void(0)">Remove</a>')
            .click(function(){
                removeActor("my"+self.num+"Div");
            });
        newdiv.append(newspan, removeLink);
        ni.append(newdiv);
        $('#theIncrementor').val(num++);
    }

然后在提交时,您将想要遍历您的div并拉出该actor数据值:

function getActors() {
    var result = [];
    $('.actorDiv').each(function(){
        result.push(this.data("actor"));
    });
    return result;
}

这样做的好处是,您可以继续将自定义数据与dom元素相关联,以防需要添加更多变量,并且不会使用标记污染您的结果。