jQuery $('body').on with parameter

Question

I have function

    $('body').on('click', '.urlsend', function ()
    {
         console.log("this.parameter");
    }

and all elements with ".urlsend" have some parameter, which I need to pass to the function. HTML looks like this:

<div id="canvas">

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function loadImgs(){

<!--somecode-->

  function gotData(arr){
    var element="";
    for(var i = 0;i<arr.data.length;i++)
    {
        var img = arr.data[i].images.original.url;
        element += '<img src="'+img+'" class="urlsend" data-url="'+img+'">';

    }
    $('#canvas').html(element);
  }

}
</script>

score 2 · Accepted Answer · answered Feb 05 '18 at 17:33

2

You can use .attr to get parameter or attribute of an HTML element.

$(document).ready(function() {
  $('body').on('click', '.urlsend', function() {
    console.log($(this).attr("parameter"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="urlsend" parameter="1"> urlsend DIV 1</div>
<div class="urlsend" parameter="2"> urlsend DIV 2</div>
<div class="urlsend" parameter="3"> urlsend DIV 3</div>
<div class="urlsend" parameter="4"> urlsend DIV 4</div>

Doc: http://api.jquery.com/attr/

answered Feb 05 '18 at 17:33

Eddie

26,593
6
36
58

You have to change the `$(this).attr("parameter")` parameter name. On my example, it is called `parameter` – Eddie Feb 05 '18 at 17:46
Because I used `
` parameter as my attribute name on my html code.
– Eddie Feb 05 '18 at 17:47
Yes, I know. I need to send img src, so I used attr('src') and also tried your method. None worked – Štěpán Chvatík Feb 05 '18 at 17:59
Does img has class urlsend? – Eddie Feb 05 '18 at 18:00
Well, problem is, that there are no IMGS. They are dynamicly created. I mean you type keyword to searchbox and multiple images appear. – Štěpán Chvatík Feb 06 '18 at 07:48
Then just copy several images from developer tools. Or take a screenshot of the img html on dev tools – Eddie Feb 06 '18 at 07:49
Well, this should work `console.log($(this).attr("src"));` – Eddie Feb 06 '18 at 07:55
When you `console.log( this );` What are you getting? – Eddie Feb 06 '18 at 07:57
https://ctrlv.cz/gEyt Now I see, that problem is in WS I am using, that $(this) is not relevant to this in specific function, but to whole app variable in websocket. – Štěpán Chvatík Feb 06 '18 at 08:02
Yeah. the `this` should be the image you are trying to get the attribute – Eddie Feb 06 '18 at 08:09
I tried to log e.target (and passing e in function) and it works. Thanks for ideas! – Štěpán Chvatík Feb 06 '18 at 08:12
Yeah! I am about to tell you about the event target. – Eddie Feb 06 '18 at 08:12

score 0 · Answer 2 · answered Feb 05 '18 at 17:31

this within the callback will be the specific .urlsend element that the event relates to, so you can access the information from this.

For instance, if the "parameter" is a data-info attribute:

console.log(this.getAttribute("data-info"));

or with more jQuery:

console.log($(this).attr("data-info"));

(Don't use .data(...) unless you want the features it provides, see this answer for details.)

Seybanks · Answer 3 · 2018-02-05T18:48:43.327

0

try this

  <script>
     $(function(){
       $('body').on('click' , ' .urlsend' , function(){
    var url=$(this).data('url');
   var user=$(this).data('user');
alert(url);
alert(user);
  });
  });
</script>    

<body>
<button class="urlsend" data-url="google.com" data-user="kate">click</button>
</body>

hope this help you

edited Feb 05 '18 at 18:48

answered Feb 05 '18 at 18:42

Seybanks

88
10

jQuery $('body').on with parameter

3 Answers3