使用Javascript在动态生成的链接中传递数据

时间:2010-03-08 20:20:49

标签: javascript jquery

问题:以下是我使用js传递数据的方法。这是一个很好的方式去做或我做错了吗?它确实有效,但我认为......对于我的相对noob JS技能似乎很可疑。

我有一个自定义网格插件,可以生成数据网格。假设它使用id#,role,some dates等生成用户名行。

我希望能够在弹出模态窗口的每一行中单击“编辑”链接来管理数据。也许改变用户的角色。

网格由包装在匿名函数中的代码生成,模式由包装在不同匿名函数中的代码生成。我需要使用该特定点击行的正确数据填充模态。

我所做的是将必要的数据作为自定义属性包含在单击的链接中以管理该用户的数据。生成的链接如下所示:

<a href="#" userrole="role1" userid="12345"> Manage </a>

因此,单击该链接将启动模态窗口,然后我使用一些jquery来获取属性值并填充模态。一个例子:

首先,处理点击的代码(只是假设点击处理程序和其他document.ready()的东西被分配了......为了简洁,我把它留下了,但这是基于正常工作的代码):

(function(){
    var EditUserClick = function(e) {
        userRole = $(this).attr('userrole'); //assign some values
        userId = $(this).attr('userid'); // assign some values

        OpenEditUserModal(userRole,userId); 
    }
});

其次,处理模态的代码:

//Public stuff so it's accessible to the click.
var OpenEditUserModal;

(function(){
    OpenEditUserModal = function(userRole,userId){
        //code to handle the modal window opening can go here
        //populate the modal
        $('#userRole').text(userRole); // let's say this is a text field
        $('#userId').val(userId); //let's say this is a hidden form field
    }
});

那怎么样?是否有更好的方法来传递这些数据,而不是将其分配给虚构的链接属性并将其传递给下一个方法?欢迎任何其他建议......总是希望学习。

1 个答案:

答案 0 :(得分:1)

如果您不关心HTML文档传递验证检查并且代码按原样运行 - 请保持这种状态。

作为一种不那么干扰,更符合标准的方法,您可以将所有内容放入 href 属性中,只需在点击时解析键值对(see this question以获取有关如何使用的提示这样做。)

<ul>
<li><a href="index.html?foo=bar&id=1">first</a>/li>
<li><a href="?foo=woo&id=2">second</a></li>
</ul>

琐碎的JS:

$('a').click(function(){
    var querystring = $(this).attr('search');
    //console.log(querystring);

    // parse here and call OpenEditUserModal       
    return false;
});