Grab URL parameter onclick of url.. Jquery, Javascript

Question

I am having some trouble trying to store the url parameters of some dynamic links that I created with an ajax post response. The ajax post is working correctly and the name and subgenre vars are being properly filled from the ajax response. Now what I would like to happen is that a user clicks on one of the generated urls, the parameters inside of the urls, i.e. subgenre="blah", are going to be sent to a database and stored. The problem I am having is that a standard event click function will not work inside or outside of the document ready function.

$(document).ready(function() {


$.each(data, function() {
$('#artist-suggestions').append('<li><a href="http://...../100.php" artist="'+ this.name +'" subgenre="'+ this.subgenre +'" onclick="artistGen()">' + this.name +     this.new + '</a></li>');
});

});

I then created an onclick function, as below, but I can not use the "this" query because it is outside of the document scope. I had to put the onclick function outside of the document ready function or else it would not work.

function artistGen(){
alert('dfdsf');

};

What am I missing here or what am I doing wrong?

Seano666 · Accepted Answer · 2014-12-20 22:37:39Z

1

You can pass these in the onclick function when you make each element.

$(document).ready(function() {


$.each(data, function() {
  artist = this.name;
  $('#artist-suggestions').append('<li><a href="http://...../100.php" artist="'+ this.name +'"        subgenre="'+ this.subgenre +'" onclick="artistGen(' + this.Blah1 + ',' + this.Blah2' + ')">' + this.name +     this.new + '</a></li>');
});

})

;

function artistGen(Blah1, Blah2){
 saveData(Blah1, Blah2);
alert('dfdsf');

};

answered Dec 20, 2014 at 22:37

Seano666

2,2381 gold badge16 silver badges14 bronze badges

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

2 Comments

Brandon Over a year ago

Trying this right now, but it is not passing the arguments.. I am wondering if it has to do with the scope

Seano666 Over a year ago

Oops, I think there was a typo with some of the concatenation, but glad you got it to work.

Trim Kadriu · Accepted Answer · 2014-12-20 22:39:22Z

0

In jQuery for dynamic elements you can use the click event in this way

$('#artist-suggestions li').on('click', 'a', function() {
    // do something
});

or you can continue with the way you did, by using a function but just add a parameter to that function like

function artistGen(Artist){
    // do something
};

answered Dec 20, 2014 at 22:39

Trim Kadriu

4613 silver badges20 bronze badges

Comments

JRulle · Accepted Answer · 2014-12-20 22:43:06Z

0

You need to remove the artistGen() function from the scope of the .load()

$(window).load(function(){    
  $('#artist-suggestions').append('<li><a href="http://...../100.php" artist="jim" subgenre="subgenre" onclick="artistGen()">jim new</a></li>');  
});

function artistGen(){
  alert('dfdsf');
}

JSFIDDLE DEMO

answered Dec 20, 2014 at 22:43

JRulle

7,5666 gold badges42 silver badges63 bronze badges

2 Comments

Brandon Over a year ago

I did remove the function from the load function and that is where my problem comes from. It would be great to use $this to grab the parameters but using the function outside the load function changes the scope and I can not carry it to the function

JRulle Over a year ago

can you pass the parameters into the function call? artistGen(parameters)

Musa · Accepted Answer · 2014-12-20 23:03:09Z

0

That's just how it is a function called in those event attributes have to be defined globally(or defined right there) not in any wrapper function. A better solution would be to attach event handlers.

$(document).ready(function() {

function artistGen(){

    alert(this.href);

};

$.each(data, function() {

    var $li = $('<li><a href="http://...../100.php" artist="'+ this.name +'" subgenre="'+ this.subgenre +'">' + this.name +     this.new + '</a></li>');
    $li.find('a').on('click', artistGen);
    $('#artist-suggestions').append($li)

});

});

edited Dec 20, 2014 at 23:03

answered Dec 20, 2014 at 22:39

Musa

97.9k17 gold badges123 silver badges144 bronze badges

4 Comments

Brandon Over a year ago

The problem I ran into when I tried something similar was that the artist variable was overwritten every time the each looped to create the next link. If I can find a simple solution to it being overwritten, then problem solved!

Musa Over a year ago

but you don't use artist variable.

Brandon Over a year ago

Then what is the point behind setting the global variable? I am confused

Brandon Over a year ago

Oh! I am sorry! I forgot to delete that from my tests to find a solution lol

Collectives™ on Stack Overflow

Grab URL parameter onclick of url.. Jquery, Javascript

4 Answers 4

2 Comments

Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related