1

This question might seem trivial but I really need to get the hang of it. Any help regarding this is greatly appreciated.

<span class="first">This thing</span>

$(.first).click(function() {});

Until now I have been using this. But due to some coding constraints, I was told to change the span from a jQuery binding to an onClick. I am unable to follow exactly what they meant by that... Could any help me figure this out and if possible throw a better light on the differences between jQuery binding and onClick binding. Any help in this regard is greatly appreciated. Thanks a lot !

RPichioli
  • 3,245
  • 2
  • 25
  • 29
Tej
  • 13
  • 5
  • look at http://www.w3schools.com/jsref/event_onclick.asp for examples of how to do what you want – depperm Aug 30 '16 at 14:24
  • What are the constraints? It's generally considered that using `onclick` (and all other `on*` event attributes) is bad practice and should be avoided where possible. – Rory McCrossan Aug 30 '16 at 14:27
  • Perhaps they did not want to bundle the jquery library. – Vasan Aug 30 '16 at 14:35

5 Answers5

0

It was a reference to an inline event handler <span class="first" onclick="alert('event handler body')">This thing</span>

Refer http://www.w3schools.com/js/js_events.asp

Vasan
  • 4,810
  • 4
  • 20
  • 39
0

You'll have to externalize your function

$(".first").click(function() {});

The first step is to get something like

function spanClickFunction() {
  ... some code ...
}
$(".first).click(spanClickFunction);

Then you'll have to move the event to your span

<span onClick="spanClickFunction()" class="first">This thing</span>

function spanClickFunction() {
   ... some code ...
}

You can have a look at this StackOverflow for a better understanding of the .click() and .on("click") and also this one for onClick() and .click() differences.

The "basic idea" is that onClick will be only fired when the element is clicked whereas jQuery .click and .on("click") can add event listeners to several tags thanks to their names, classes etc ... not the IDs as they must be unique in your whole page ! I'll write a jsFiddle if you have further questions about this :)

Community
  • 1
  • 1
Gregoire
  • 749
  • 6
  • 15
0

Here is what they probably want:

span class="first" onclick="myfunc()"

The difference between that and your jQuery binding is that your jQuery selector is working on anything with the class ".first" while the onclick version only affects whatever gets drawn with that bit of html.

You could change your jQuery selector to work on a unique ID instead of a class too.

There are many possible reasons for asking for it a certain way. Using the jQuery binding makes it easier to handle and manipulate the events from a central js file. Using the onclick makes it easier to see what is going on directly in the dom, it also makes it possible to manipulate the onclick attr without having access to the main js file where all the bindings are declared. It could also just come down to coding conventions that people adhere to.

YYY
  • 1
  • 1
0

Thanks a lot for coming up with some good answers for me. I will definitely follow and go through the links you provided.

Anyways, the following onClick binding worked for me. 

$(document).on('click','.first',(function(){
}));

Actually, we got a problem with typical jQuery binding of the span element as mentioned in my question. And the above onClick binding helped us to solve it. It seems pretty standard.

But Anyways, Thanks a lot for all your support. I really appreciate it :)

Tej
  • 13
  • 5
0

I suggest you to use ".on()" jQuery's feature to bind the event and handle the binded event.

The official jQuery's ".on()" documentation says: "Attach an event handler function for one or more events to the selected elements."

Direct link: http://api.jquery.com/on/

Working example: 

$(document).ready(function() {
  $('.first').on( "click", function() {
    alert('you clicked me!');  
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="first">This thing</span>
RPichioli
  • 3,245
  • 2
  • 25
  • 29