0

親 div + その中の 3 つの div。子divの1つにリンクがあり、クリックすると親のコンテンツが変更され、新しいコンテンツに別のリンクが表示されます。これは、親のコンテンツを元に戻すことになっています。「戻る」ことは機能しません。

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:32.763 に答える