Jquery get id of list elements and call function based on click

Question

Based on the click of the list elements ( whose ids I set to be the same as the objects), I want to call a function ( in this case, just print that object). I don't want to attach an onclick to every list item. I want something like this.

$('#li.menu').click(function(){
    $('li').each(function(){
    var id= $(this).attr('id');
    }
   //when the id is clicked, see the object and if it's there and call print on it)
});



//sample function:

    function print(x){
    console.log(x);
    }

Var myObject = {          
            obj1:{ JSON here},    
            obj2:{ JSON here }
    }

<!-- Bootstrap Simple Sidebar: Sidebar -->
<div id="sidebar-wrapper">
    <ul class="sidebar-nav" id="menu">
        <li>
            <a id="obj1" href="#repo">Repository </a>
        </li>
        <li>
            <a id="obj2" href="#config">Configuration</a>
        </li>

    </ul>
</div>

Your object has no id property nor your LI elements. What is your expected behaviour? — A. Wolff, Jul 26 '16 at 14:43
I meant to just call the function print, and pass in whatever id was clicked ( corresponding object) — Angular, Jul 26 '16 at 14:43
But you aware than your selector `#li.menu` match nothing and still none of your LI has any id nor your object `myObject`. This is quite confusing, isn't it?! — A. Wolff, Jul 26 '16 at 14:45
Note: Where you've said "JSON here" you probably meant "object initializer here" or "data here" or similar. JSON is a *textual notation* for data exchange. [(More)](http://stackoverflow.com/a/2904181/157247) If you're dealing with JavaScript source code, and not dealing with a *string*, you're not dealing with JSON. — T.J. Crowder, Jul 26 '16 at 14:46
yes there is JSON data inside each of those objects, which I parsed from a file. my goal is not to display the data, but I just used the example print statement for sake of understandnig — Angular, Jul 26 '16 at 14:51
@Angular: The point is it's **not** "JSON" anymore if you've parsed it. — T.J. Crowder, Jul 26 '16 at 15:01

score 2 · Accepted Answer · answered Jul 26 '16 at 14:44

Event delegation, using the correct selector, brackets syntax, and correct capitalization do it:

// It's `var`, not `Var` -- capitalization matters in JavaScript
var myObject = {          
    obj1: { foo: "I'm obj1" },
    obj2: { foo: "I'm obj2" }
};

// Event delegation: Hook click on #menu, only fire handler if
// the click goes through an `a` element
$('#menu').on("click", "a", function(){
    //             vvvvvvv-- id of the clicked element
    print(myObject[this.id]);
    // Brackets --^-------^
});
function print(x){
    console.log(x);
}

<div id="sidebar-wrapper">
    <ul class="sidebar-nav" id="menu">
        <li>
            <a id="obj1" href="#repo">Repository </a>
        </li>
        <li>
            <a id="obj2" href="#config">Configuration</a>
        </li>

    </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

thank you for the explanation! so what's the difference between the 'on' and the 'click' I was using? — Angular, Jul 26 '16 at 14:56
`.click(function()...)` is short for `.on("click", function()...)`. But the form I've used above, with a selector, does **event delegation**. See the comment in the code above, and [the documentation](http://api.jquery.com/on). — T.J. Crowder, Jul 26 '16 at 15:00

Jquery get id of list elements and call function based on click

1 Answers1