Question

I have the following element on my page, which gets a dynamically added ID from my javascript MVC framework:

<input data-bind="attr: { id: attributeName }" type="text" />

When the element gets dynamically rendered on the page, the resulting HTML looks like this:

<input id="job_title" data-bind="attr: { id: attributeName }" type="text" />

However, when I attempt to click function to the input box, it doesn’t work. (The same code works on a pre-existing input element though).

$("#job_title").click(function() {
    alert('hi');
});

The above code doesn’t seem to work when the input element is dynamically added to the page with a dynamic “id” attribute. I’m adding this element to the page in a knockout.js foreach loop, but I don’t know if that matters. Has anyone else run into this?

Here’s the real code… how can I simulate the $(“body”).on() method to replace this:

 $("#job_title").typeahead({
    source: searchFunction,        
    onselect: function(obj) {            
    }
 });

Answer 1

You might want to try:


$("body").on("click", "#job_title", function() { alert('hi');
});


This should work, as click doesn’t because you’re dynamically adding the element.