Avoid inline javascript

Question

My code is essentially this:

<a href="javascript:void(0);" onClick="viewServices(1)">Services</a>
<a href="javascript:void(0);" onClick="viewServices(43)">Services</a>
<a href="javascript:void(0);" onClick="viewServices(16)">Services</a>
...

Where viewServices:

function viewServices(stylistID){
    alert(stylistID);
}

Only, there are two problems:

I am using inline Javascript, and that is discouraged.
When I click a link, the function isn't called.

It should also be mentioned that I am importing JQuery and Bootstraps .js files, and that each link (as well as associated ID) is loaded dynamically.

Is there an established method that will allow me to remove my inline javascript, but also make it so that I can call functions that pass the dynamically loaded link's "ID" to the function?

** EDIT

Each link is generated during a mysqli_fetch_row that repeats until each row's information has been run through. The number in viewServices(#) is actually

<?php echo $row[0]; ?>

why did you use href="javascript:void(0);" ?

Oki E. Rinaldi
– Oki E. Rinaldi

2013-11-09 03:16:07 +00:00
Commented Nov 9, 2013 at 3:16 — Oki E. Rinaldi
– Oki E. Rinaldi, Commented Nov 9, 2013 at 3:16
I think href="#" would make it better

Oki E. Rinaldi
– Oki E. Rinaldi

2013-11-09 03:17:02 +00:00
Commented Nov 9, 2013 at 3:17 — Oki E. Rinaldi
– Oki E. Rinaldi, Commented Nov 9, 2013 at 3:17

Billy Chan · Accepted Answer · 2013-11-09 03:21:41Z

6

A solution is to utilize data attribute and class to refactor html like this

<a href="#" data-service="16" class="service-link">Services</a>

Then, jQuery

$('.service-link').on('click', function(e){
  e.preventDefault(); // Stop default behavior of clicking link
  alert(this.data('service')); // Retrieve the service id and use it
});

edited Nov 9, 2013 at 3:21

answered Nov 9, 2013 at 3:16

Billy Chan

24.8k4 gold badges56 silver badges70 bronze badges

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

15 Comments

Alcides Queiroz Over a year ago

yeap... since HTML5 is not a REAL implementation of SGML, data-attributes are possible... once they couldn't be validated against a DTD.

Billy Chan Over a year ago

@DanielBrown, yes data set is in HTML but actually not new :) It's widely accepted in almost all broswers. caniuse.com/dataset

plalx Over a year ago

4 upvotes and no nones saw that this.data(service) should be this.data('service')...?

Billy Chan Over a year ago

@DanielBrown, my pleasure :) on() listens to the events on the selector, no matter it exists or will be added later dynamically. api.jquery.com/on

plalx Over a year ago

@DanielBrown, Sure $('#links-container').on('click', '.service-link', ...); This will take advantage of event bubbling, since click events are listened on the parent element. jQuery will automatically filter out click events that aren't coming from .service-link elements.

|

Oriol · Accepted Answer · 2013-11-09 03:24:13Z

2

You could use

<a class="viewServices" data-arg="1">Services</a>
<a class="viewServices" data-arg="43">Services</a>
<a class="viewServices" data-arg="16">Services</a>

and

// viewServices is not defined here
(function() { // viewServices is defined inside here
    function viewServices(arg) { /* ... */ }
    function viewServicesCaller() {
        viewServices(this.getAttribute('data-arg'));
    }
    var els = document.getElementsByClassName('viewServices');
    for(var i=els.length-1; i>=0; --i) {
        els[i].onclick = viewServicesCaller;
    }
})();

Probably, your code doesn't work because viewServices is defined inside a closure, so it isn't global. Then, you must add the event listeners in that closure.

edited Nov 9, 2013 at 3:24

answered Nov 9, 2013 at 3:18

Oriol

291k71 gold badges459 silver badges535 bronze badges

Comments

Progo · Accepted Answer · 2013-11-09 03:17:48Z

1

What errors are you getting in the console?

Is the javascript in the head section of your page? If not, try that.

If you don't want to do that, make sure the javascript code is before the link.

Good luck.

For jQuery, you could do this:

<a class="services" data-service="1">Services</a>
<a class="services" data-service="43">Services</a>
<a class="services" data-service="16">Services</a>


$(".services").click(function(link){
  link.preventDefault();
  alert(this.data("service-id"));
});

answered Nov 9, 2013 at 3:17

Progo

3,4887 gold badges31 silver badges44 bronze badges

Collectives™ on Stack Overflow

Avoid inline javascript

3 Answers 3

15 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

15 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related