مسج انقر فوق وظيفة مقابل مضمنة onclick

StackOverflow https://stackoverflow.com/questions/815856

  •  03-07-2019
  •  | 
  •  

سؤال

أحاول تنظيم قانون بلدي وجعلها أكثر أونوبستروسيفي.

أساسا هناك ارتباط أداء هذا العمل.إذا كنت انقر على الرابط الإجراء يتم عن طريق أجاكس (ajax المدونة ليست على المدونة هنا) والنص هو استبدال نص آخر ، تقدم للمستخدم القدرة على التراجع عن العمل.إذا كان المستخدم انقر فوق التراجع عن الارتباط, اياكس استعادة الوضع السابق والنص تقدم للمستخدم أداء العمل انها تظهر مرة أخرى.

لقد صنعت نسخة من أبسط مشكلتي في ملف html واحد (رمز أدناه).هناك نوعان من الفقرات.إذا كنت انقر على الرابط من الفقرة الأولى التي يستخدم مضمنة onclick الاتصال, كود يعمل كما هو متوقع.ولكن إذا كنت انقر على الرابط من الفقرة الثانية التي يستخدم مسج onclick وظيفة التراجع عن رابط لا يعمل ولا أستطيع معرفة السبب.

أي مساعدة ؟ شكرا جزيلا!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(function() {      
            $(".add2").click(function(){
                var placeId = $(this).parents(".place").attr("id");
                $("#" + placeId + " .add2").remove();
                $("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd2\" href=\"#\">Undo</a>");
                return false;
            })
            $(".undoadd2").click(function(){
                var placeId = $(this).parents(".place").attr("id");
                $("#" + placeId + " .actions").find("span.added, a.add2").remove();
                $("#" + placeId + " .actions").append("<a class='add2' onclick='copyPlace(\"" + placeId + "\"); return false;' href='#'>Add place</a>");
                return false;
            })
        });

        function addPlace(placeId){
            $("#" + placeId + " .add").remove();
            $("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" onclick=\"undoAddPlace('" + placeId + "'); return false;\">Undo</a>");
            return false;
        }

        function undoAddPlace(placeId){
            $("#" + placeId + " .actions").find("span.added, a.undoadd").remove();
            $("#" + placeId + " .actions").append("<a class='add' onclick='addPlace(\"" + placeId + "\"); return false;' href='#'>Add place</a>");
            return false;
        }
    </script>

</head>
<body id="home">
    <div class="place" id="3435910">
        <p class="actions"><a href="#" onclick="addPlace('3435910'); return false;" class="add">Add place</a></p>
    </div>

    <div class="place" id="3435912">
        <p class="actions"><a href="#" class="add2">Add place</a></p>
    </div>
</body>
</html>
هل كانت مفيدة؟

المحلول

منذ كنت حيوي إضافة جديدة البنود دوم عليك تسجيل انقر فوق معالج مرة أخرى على البنود الجديدة.

يمكنك استخدام .live من أجل هذا.

التحديث

منذ مسج 1.7 ، .on الأسلوب هو الطريقة المفضلة للقيام بذلك.

منذ مسج 1.9 .live الطريقة تم إزالتها.

نصائح أخرى

وفقط مما يدل على استخدام .end () عن حل أكثر مرونة: 

$(function() {          
    $(".add2").click(function(){
            return $(this).parents(".place")
                .find(".add2")
                    .hide()
                .end()
                .find(".actions")
                    .append("<span class=\"added\">Added!</span> <a class=\"undoadd2\" href=\"#\">Undo</a>");
    });
    $('.undoadd2').live('click', function(){ 
            return $(this).parents(".place")
                .find(".actions")
                    .find("span.added, a.undoadd2")
                        .remove()
                    .end()
                .end()
                .find(".add2")
                    .show();
    });
});

ومنذ كنت تقوم بإضافة عناصر جديدة بشكل حيوي إلى DOM، سيكون لديك لتسجيل معالج click مرة أخرى على عناصر جديدة. مسج يحدد المعالج عند استدعاء $('...').click(...).

ونجاح باهر !! شكر لكم جميعا!

ولقد قرأت عن الحدث على الهواء مباشرة ورمز العمل النهائي هو: 

$(function() {      
            $(".add2").click(function(){
                var placeId = $(this).parents(".place").attr("id");
                $("#" + placeId + " .add2").hide();
                $("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd2\" href=\"#\">Undo</a>");
                return false;
            })
            $('.undoadd2').live('click', function(){ 
                var placeId = $(this).parents(".place").attr("id");
                $("#" + placeId + " .actions").find("span.added, a.undoadd2").remove();
                $("#" + placeId + " .add2").show();
                return false;
            });

وسبق لي استخدامها إزالة () لحذف النص الذي تقدم لتنفيذ الإجراء. لقد غيرت لإخفاء / إظهار ولذا فإنني لم يكن لديك لاستخدام يعيش أيضا في الوظيفة الأولى.

وشكرا مرة أخرى!

لا يتم انتقاؤها فوق معالج يصل عند إلحاق العنصر إلى DOM. حاول استخدام مسج لتسجيل انقر معالج عن طريق تغيير خط (ق) التي تبدو مثل: 

$("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" onclick=\"undoAddPlace('" + placeId + "'); return false;\">Undo</a>")

ل

$("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" >Undo</a>");
$('#' + placeId + " .actions").find("span:last").find("a").click( function() {
    undoAddPlace( placeId );
    return false;
});

وكنت قد تكون قادرة على القيام بذلك ببساطة أكثر، ولكن يبدو أنك يمكن أن تكون إضافة تمتد أكثر من واحد إلى الفقرة فذهبت المحافظة. ربما يمكن أيضا سلسلة لمن إلحاق، ولكنني اعتقدت جعل إعادة تحديد النقطة أكثر وضوحا.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top