Question

父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>');
            });
        });

Answer 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>');
    });
});

Answer 2

问题是因为事件在加载时受到约束。在此之后动态附加/删除元素时，您需要将事件委托给始终在页面生命周期中可用的元素。试试这个：

$(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>');
    });
});

使用jQuery更改div的内容

2 个答案: