javascript $(this).find("a").attr("onclick"); onclick 给出无效字符

$(this).find("a").attr("onclick"); onclick giving invalid character

提问by Sagar

I m creating a dynamic tab using Jquery its working fine but giving error for anchor tag onclickerror is invalid character. See the javascript:

我正在使用 Jquery 创建一个动态选项卡，它工作正常，但给出锚标记的错误onclick错误是无效字符。请参阅javascript：

$(document).ready(function(){

    //when page loads...
    $(".tab_content").hide(); //hide all content
    $("ol.tabs li:first").addClass("active").show();  //Activate first tab
    $(".tab_content:first").show(); // show first tab content

    //on click event
    $("ol.tabs li").click(function(){
        $("ol.tabs li").removeClass("active"); //remove any "active" class
        $(this).addClass("active"); // add "active" class to selected tabs
        $(".tab_content").hide(); // hide all tab content
        //var activeTab = $(this).find("a").attr("href"); // find href attribute value to identify the active tab + content
        var activeTab = $(this).find("a").attr("onclick"); // find href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); // fadeIn the active ID content
        alert(activeTab);
        return false;
    });

});

And the HTML:

和 HTML：

<div>
    <div id="tab1" class="tab_content">01</div>
    <div id="tab2" class="tab_content">02</div>
    <div id="tab3" class="tab_content">03</div>
</div>
<ol class="tabs">
    <li><a onclick="#tab1">Unique benefits</a></li>
    <li><a onclick="#tab2">Insurance</a></li>
    <li><a onclick="#tab3">Business Loan</a></li>
</ol>

If i use var activeTab = $(this).find("a").attr("href"); Its work fine. Help out

如果我使用var activeTab = $(this).find("a").attr("href"); 它的工作正常。帮忙

回答by naveen

Thats the expected behaviour.

这就是预期的行为。

Because, last time I checked, onclickwas an event and not an attribute or property.
Also hrefand onclickare completely different things.

因为，上次我检查时，它onclick是一个事件，而不是一个属性或属性。
也href和onclick是完全不同的东西。

回答by Ali Habibzadeh

if you want to get the content(function) of onclick this is how you can go about it:

如果您想获得 onclick 的内容（功能），您可以这样做：

$('p').click(function () {
            alert($(this).text());
        });

        $.each($("p").data("events"), function (i, event) {
            alert(i);
            $.each(event, function (j, h) {
                alert(h.handler);
            });
        });

回答by Dennis

Your onclick inline attribute is equivalent to this:

您的 onclick 内联属性等效于：

function() {
    #tab1
}

which is not valid javascript. While href is a string value that tells the link where it should go when clicked (default behavior), onclick is a javascript function that is a handler for the click event to provide alternate behavior.

这是无效的 javascript。虽然 href 是一个字符串值，它告诉链接点击时它应该去哪里（默认行为），但 onclick 是一个 JavaScript 函数，它是单击事件的处理程序，以提供替代行为。

回答by betamax

You cannot set the onclickof an element to an arbitrary string, this wont mean anything to javascript. Instead you should use fields such as the hrefor data-attributes to store information for use in events.

您不能将onclick元素的 设置为任意字符串，这对 javascript 没有任何意义。相反，您应该使用诸如href或 数据属性之类的字段来存储在事件中使用的信息。

To use the hrefattribute, change your ollist to look like this:

要使用该href属性，请将您的ol列表更改为如下所示：

<ol class="tabs">
    <li><a href="#tab1">Unique benefits</a></li>
    <li><a href="#tab2">Insurance</a></li>
    <li><a href="#tab3">Business Loan</a></li>
</ol>

And then instead of

然后代替

var activeTab = $(this).find("a").attr("onclick"); // find href attribute value to identify the active tab + content
$(activeTab).fadeIn(); // fadeIn the active ID content

And use this javascript:

并使用这个 javascript：

var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();

This will use the href attribute of your link to show the tab with that ID.

这将使用链接的 href 属性来显示具有该 ID 的选项卡。

---

---

Alternatively, to use data-attributes you could set your list to be more like:

或者，要使用数据属性，您可以将列表设置为更像：

<ol class="tabs">
    <li><a href="#" data-tabid="tab1">Unique benefits</a></li>
    <li><a href="#" data-tabid="tab2">Insurance</a></li>
    <li><a href="#" data-tabid="tab3">Business Loan</a></li>
</ol>

And use this javascript:

并使用这个 javascript：

var activeTab = $(this).find("a").data("tabid");
$("#" + activeTab).fadeIn();

This approach uses data-attributesto hold the ID of the tab <div>you want to show.

这种方法使用数据属性来保存<div>要显示的选项卡的 ID 。

回答by theprogrammer

The onclick attribute is an event handler attribute is the same as what you are doing in this line of code on your script:

onclick 属性是一个事件处理程序属性，与您在脚本的这行代码中所做的相同：

$("ol.tabs li").click(

$("ol.tabs li").click(

See: http://reference.sitepoint.com/html/event-attributes/onclick

请参阅：http: //reference.sitepoint.com/html/event-attributes/onclick

In other words you are assigning the handling of the click event to a script by the name of '#tab1' The hash tag is an 'illegal' script char.

换句话说，您将点击事件的处理分配给名为“#tab1”的脚本。哈希标签是一个“非法”脚本字符。

To accomplish what you want there are a few thinks you can do. First use a data attribute.

为了完成你想要的事情，你可以做一些想法。首先使用数据属性。

<ol class="tabs">
        <li><a data-tab-name="#tab1">Unique benefits</a></li>
        <li><a data-tab-name="#tab2">Insurance</a></li>
        <li><a data-tab-name="#tab3">Business Loan</a></li>
</ol>

And them change your js line to:

他们将您的 js 行更改为：

var activeTab = $(this).find("a").attr("data-tab-name");

On a related note I will change a few more things on your script. Since you are attaching the event handler to the onclick event of the list item I will add the attribute to the list item as follow.

在相关说明中，我将对您的脚本进行更多更改。由于您将事件处理程序附加到列表项的 onclick 事件，我将按如下方式将属性添加到列表项。

<ol class="tabs">
        <li data-tab-name="#tab1"><a>Unique benefits</a></li>
        <li data-tab-name="#tab2"><a>Insurance</a></li>
        <li data-tab-name="#tab3"><a>Business Loan</a></li>
</ol>

That allows me to cahnge the js line to this:

这使我可以将 js 行更改为：

var activeTab = $(this).attr("data-tab-name");

What should improve performance a bit but more important makes the code more readable.

什么应该稍微提高性能，但更重要的是使代码更具可读性。

Hope this helps.

希望这可以帮助。