جافا سكريبت:تغيير قيمة onclick مع أو بدون jQuery

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

سؤال

أرغب في تغيير قيمة onclick السمة على مرساة.أريد تعيينها على سلسلة جديدة تحتوي على JavaScript.(يتم توفير هذه السلسلة إلى كود JavaScript من جانب العميل بواسطة الخادم، ويمكن أن تحتوي على كل ما يمكنك وضعه في ملف onclick السمة في HTML.) إليك بعض الأشياء التي جربتها:

  • باستخدام مسج attr("onclick", js) لا يعمل مع كل من Firefox وIE6/7.
  • استخدام setAttribute("onclick", js) يعمل مع Firefox وIE8، ولكن ليس IE6/7.
  • استخدام onclick = function() { return eval(js); } لا يعمل لأنه غير مسموح لك باستخدامه return يتم تمرير الرمز إلى eval().

هل لدى أي شخص اقتراح لتعيين سمة onclick لجعل هذا يعمل مع Firefox وIE 6/7/8؟انظر أيضًا أدناه الكود الذي استخدمته لاختبار هذا.

<html>
    <head>
        <script type="text/javascript"
                src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var js = "alert('B'); return false;";
                // Set with JQuery: doesn't work
                $("a").attr("onclick", js);
                // Set with setAttribute(): at least works with Firefox
                //document.getElementById("anchor").setAttribute("onclick", js);
            });
        </script>
    </head>
    <body>
        <a href="http://www.google.com/" id="anchor" onclick="alert('A'); return false;">Click</a>
    </body>
</html>
هل كانت مفيدة؟

المحلول

لا ينبغي أن تستخدم onClick أكثر من ذلك إذا كنت تستخدم jQuery.يوفر jQuery أساليبه الخاصة لربط الأحداث وربطها.يرى .click()

$(document).ready(function(){
    var js = "alert('B:' + this.id); return false;";
    // create a function from the "js" string
    var newclick = new Function(js);

    // clears onclick then sets click using jQuery
    $("#anchor").attr('onclick', '').click(newclick);
});

يجب أن يلغي ذلك onClick الوظيفة - واحتفظ بـ "جافا سكريبت من سلسلة" أيضًا.

أفضل شيء يمكنك فعله هو إزالة onclick="" من <a> العنصر في كود HTML ثم قم بالتبديل إلى استخدام غير مزعجة طريقة ربط حدث للنقر.

قلت أيضا:

استخدام onclick = function() { return eval(js); } لا يعمل لأنه غير مسموح لك باستخدام الإرجاع في التعليمات البرمجية التي تم تمريرها إلى eval().

لا - لن يحدث ذلك، ولكن onclick = eval("(function(){"+js+"})"); سوف يلتف المتغير "js" في حاوية الوظيفة. onclick = new Function(js); يعمل أيضًا وهو أنظف قليلاً للقراءة.(لاحظ رأس المال F) - انظر التوثيق على Function() بناة

نصائح أخرى

راجع للشغل، بدون JQuery يمكن القيام بذلك أيضًا، ولكن من الواضح أنه قبيح جدًا لأنه يأخذ في الاعتبار IE/non-IE فقط:

if(isie)
   tmpobject.setAttribute('onclick',(new Function(tmp.nextSibling.getAttributeNode('onclick').value)));
else
   $(tmpobject).attr('onclick',tmp.nextSibling.attributes[0].value); //this even supposes index

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

أحد الأمور المزعجة في Jquery هو أن وظيفة النقر لا تتعرف على اليد المشفرة عند النقر من HTML.

لذلك، عليك أن تختار إلى حد كبير.قم بإعداد جميع المعالجات الخاصة بك في وظيفة init أو جميعها بتنسيق html.

حدث النقر في JQuery هو وظيفة النقر $("myelt").click (وظيفة ....).

ما عليك سوى استخدام طريقة ربط jQuery! jquery-selector!.bind('event', !fn!);

انظر هنا لمزيد من المعلومات حول الأحداث في jQuery

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

<a id="the_anchor" href="">

وبعد ذلك لتعيين سلسلة JavaScript الخاصة بك للنقر على المرساة، ضع هذا في مكان آخر (أي.الرأس، لاحقًا في النص، أيًا كان):

<script>
    var js = "alert('I am your string of JavaScript');"; // js is your string of script
    document.getElementById('the_anchor').href = 'javascript:' + js;
</script>

إذا كانت لديك كل هذه المعلومات على الخادم قبل إرسال الصفحة، فيمكنك أيضًا ببساطة وضع JavaScript مباشرة في href سمة المرساة مثل ذلك:

<a href="javascript:alert('I am your script.'); alert('So am I.');">Click me</a>

لاحظ أنه باتباع فكرة gnarf يمكنك أيضًا القيام بما يلي:

var js = "alert('B:' + this.id); return false;";<br/>
var newclick = eval("(function(){"+js+"});");<br/>
$("a").get(0).onclick = newclick;

سيؤدي ذلك إلى تعيين النقرة دون تشغيل الحدث (واجهت نفس المشكلة هنا واستغرق الأمر بعض الوقت لمعرفة ذلك).

توصلت إلى حل سريع وقذر لهذا الأمر.تستخدم فقط <select onchange='this.options[this.selectedIndex].onclick();> <option onclick='alert("hello world")' ></option> </select>

أتمنى أن يساعدك هذا

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