JQuery: How to get innerText from object?

Question

I want to replace content in a web page with content from clicked elements and made the following JQuery:

function clickHandler(id) {
    $("#title").html(id.innerText);
}

$("#navigation a[href]").bind("click", this.id, clickHandler);

The only thing that doesn't work is the replacing part. The content is there in the innerText property of the "id" object, but how do I access it? I've tried about every syntax I could think of: id->innerText, id[innerText], id['innerText'], id.innerText and id(╯°□°)╯︵ ┻━┻innerText(╯°□°)╯︵ ┻━┻.

Answer 1

this inside the click handler refers to the clicked element, so you can just get its text using .text()

function clickHandler() {
    $("#title").html($(this).text());
}

$("#navigation a[href]").bind("click", clickHandler);

Answer 2

You can use this:

$("#navigation a[href]").on("click", function(){
  var linkText = $(this).text();
  $("#title").html(linkText);
});

(╯°□°)╯︵ ┻━┻

Answer 3

function clickHandler(event) {
    console.log(event.data);
    $("#title").html(($("#" + event.data.id).text()));
}


var $obj = $("#navigation a[href]");

$obj.bind("click", {'id': $obj.attr("id")}, clickHandler);

Fiddle