Jquery attr() not working inside click functions

Question

I've been trying for 3 days figure out why the attr() isn't working inside functions in Jquery. It may look like the question has already been answered but none of them is working for me.

I'm trying to change the data-text atribute from a tweet button to tweet the current text.

Here is my code:

$(".twitter-share-button").attr("data-text", "Hello World"); //Working

$("#change").on("click", function() {
    $(".twitter-share-button").attr("data-text", "Hello Universe"); // Not working
});

Example in Jsfiddle: https://jsfiddle.net/ooneskbe/

This has nothing to do with attr in functions, it just doesn't work because the twitter code replaces your element with a new one and stores your data-text somewhere else. — tkausl
– tkausl, Commented Sep 18, 2016 at 14:46
Seems to work just fine -> jsfiddle.net/adeneo/ooneskbe/1 but the button is inserted in an iFrame and takes the attribute value on pageload — adeneo
– adeneo, Commented Sep 18, 2016 at 14:47
works fine here jsfiddle.net/ooneskbe/2 What are you expecting this to do exactly? — charlietfl
– charlietfl, Commented Sep 18, 2016 at 14:48
@charlietfl I need to generate a random quote and be able to share on twitter. It's a little application from Free Code Camp: codepen.io/sadraque/full/kkrypA As all of you pointed, the twitter scripts is changing the structure of the button, I'm trying figuring out something else to implementing this function. Thank you all. — Sadraque Santos
– Sadraque Santos, Commented Sep 18, 2016 at 15:20

krivtom · Accepted Answer · 2016-09-18 14:48:29Z

1

Your question does not represent the whole picture. The reason why this is not working, is because of this script that you include:

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

This script changes your HTML. If the script is not included, the generated HTML of a button is

<a class="twitter-share-button" href="https://twitter.com/share" data-show-count="false" data-size="large">Tweet</a>

However, as soon as this script is loaded and executed, your HTML becomes

<a class="btn" id="b" href="https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Ffiddle.jshell.net%2F_display%2F&amp;ref_src=twsrc%5Etfw&amp;tw_p=tweetbutton&amp;url=https%3A%2F%2Ffiddle.jshell.net%2F_display%2F">
    <i></i>
    <span class="label" id="l">Tweet</span>
</a>

You can see that the new HTML does not have a class twitter-share-button. I am not sure what you are trying to achieve with the data attribute, but you need to think of some other way to do this.

answered Sep 18, 2016 at 14:48

krivtom

25k10 gold badges53 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sadraque Santos Over a year ago

I'm trying to tweet a random generated quote, it works fine when the page is first loaded but it not work after a click a button to change that quote.

Sadraque Santos Over a year ago

I need to generate a random quote and be able to share on twitter. It's a little application from Free Code Camp: codepen.io/sadraque/full/kkrypA

krivtom Over a year ago

@SadraqueSantos It works the first time the page is loaded, because the Twitter widget script is not executed yet, therefore you are able to find element by class twitter-share-button. After the script executes this class does not exist anymore.

Sadraque Santos Over a year ago

Yeah, I think I'm trying to make the share button the wrong way. I'm figuring out something else. Thanks for your help.

Xupitan · Accepted Answer · 2016-09-24 11:47:44Z

0

$(".twitter-share-button").attr("data-text", "Hello World");
var dataObj = $(".twitter-share-button").data();
$("#change").on("click", function() {
    dataObj.text = "Hello Universe";
    $(".twitter-share-button").data(dataObj);
});

try it : https://jsfiddle.net/667f171z/1/

edited Sep 24, 2016 at 11:47

answered Sep 23, 2016 at 10:45

Xupitan

1,6891 gold badge10 silver badges13 bronze badges

1 Comment

abarisone Over a year ago

Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this".

Collectives™ on Stack Overflow

Jquery attr() not working inside click functions

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related