Question

我在我正在设计的网站上使用简单模型（http://simplemodal.plasm.it/#examples），并希望使用AJAX动态创建弹出窗口。

我遇到的问题是获取顶部div中div的ID。我有以下HTML：

<div id="modal-ajax">
    <a href="#" id='test1:test2:test:3'>Link 1</a>
    <a href="#" id='test4:test5:test:6'>Link 2</a>
    <a href="#" id='test7:test8:test:9'>Link 3</a>
</div>

和jQuery：

window.addEvent("domready", function(e){
$("modal-ajax").addEvent("click", function(e){
    var values = this.id.split(':');
        var DisplayType = values[0];
        var ID = values[1];
        var three = values[2];

    e.stop();
    var SM = new SimpleModal({"btn_ok":"Confirm button", "width":600});
    SM.show({
        "model":"modal-ajax",
        "title":"Are you sure you want to delete this?",
        "param":{
        "url":"test.ajax.php",
        "onRequestComplete": function(){ }
        }
    });
})

}）;

所以，如果我点击链接1，我应该得到值test1：test2：test：3然后我可以拆分＆＃34;：＆＃34;。

我需要做以上所以我可以通过AJAX将拆分部分发送到php页面，然后我可以从中绘制表格。

似乎无论我尝试什么我都无法获得值test1：test2：test：3当我点击链接1

Answer 1

对于初学者，您忘记了选择器中的前导#。

但即使那里有。我怀疑它会起作用，因为您将点击事件限制在div，而不是a标记。因此，当单击链接时，事件会冒泡到包含div。在回调中，this绑定到div，而不是a。

你可能想做这样的事情：

$("#modal-ajax a").on("click", function(e) {
    alert(this.id); //see if this pops up what you expect

    // your code
});

这会将点击处理程序绑定到链接本身。

Answer 2

更好的解决方案可能是使用data- *属性来使代码更清晰。

实施例

<div id="modal-ajax">
    <a href="#" class="some-actionable-class" data-value1="test1" data-value2="test2">Link 1</a>
    <a href="#" class="some-actionable-class" data-value1="test1" data-value2="test2">Link 2</a>
    <a href="#" class="some-actionable-class" data-value1="test1" data-value2="test2">Link 3</a>
</div>

的JavaScript

(function(){
    var getElementData = function(element) {
        return {
            value1: $(element).data('value1'),
            value2: $(element).data('value2')
        };
    }
    $('.some-actionable-class').on('click', function(e) {
        e.preventDefault();

        var data = getElementData(this);

        var SM = new SimpleModal({"btn_ok":"Confirm button", "width":600});
        SM.show({/* ... code removed .. */ });
    });

})();

JQuery Div Div id值（这个）

2 个答案: