0

父 div + 3 div 里面。在其中一个子 div 中有一个链接，单击它会更改父级的内容并在新内容中显示另一个链接，这应该会将父级的内容更改回原始内容。“回去”的事情不起作用。

HTML：

<div id="parent">
    <div class="onCenterSmall">
    <a id="valueForMoney" href="javascript:: void(0)">Read more</a>
    </div>
    <div class="onCenterSmall">
    </div>
    <div class="onCenterSmall">
    </div>
</div>

JS：

$(document).ready(function () {
            $("#valueForMoney").click(function (e) {
                e.preventDefault();
                $("#mediaWindow").html('<div class="onCenterBig"><div id="backy"><a id="backLink" href="javascript:: void(0)">Go back</a></div></div><div class="onCenterSmall"></div>');
            });
        });

        $(document).ready(function () {
            $("#backLink").click(function (e) {
                e.preventDefault();
                $("#mediaWindow").html('<div class="onCenterSmall"></div><div class="onCenterSmall"></div><div class="onCenterSmall"></div>');
            });
        });
4

2 回答 2

1

该元素是动态添加的，因此您需要一个委托的事件处理程序：

$(document).ready(function () {
    $('#mediaWindow').on('click', '#valueForMoney', function (e) {
        e.preventDefault();
        $("#mediaWindow").html('<div class="onCenterBig"><div id="backy"><a id="backLink" href="javascript:: void(0)">Go back</a></div></div><div class="onCenterSmall"></div>');
    });

    $('#mediaWindow').on('click', '#backLink', function (e) {
        e.preventDefault();
        $("#mediaWindow").html('<div class="onCenterSmall"></div><div class="onCenterSmall"></div><div class="onCenterSmall"></div>');
    });
});
于 2013-09-03T11:55:13.320 回答
1

问题是因为事件绑定在负载上。当您在此之后动态添加/删除元素时，您需要将事件委托给在页面生命周期中始终可用的元素。尝试这个：

$(document).ready(function () {
    $("#mediaWindow").on('click', '#valueForMoney', function (e) {
        e.preventDefault();
        $("#mediaWindow").html('<div class="onCenterBig"><div id="backy"><a id="backLink" href="javascript:: void(0)">Go back</a></div></div><div class="onCenterSmall"></div>');
    });

    $("#mediaWindow").on('click', '#backLink', function (e) {
        e.preventDefault();
        $("#mediaWindow").html('<div class="onCenterSmall"></div><div class="onCenterSmall"></div><div class="onCenterSmall"></div>');
    });
});
于 2013-09-03T11:55:32.763 回答