JQuery not detecting id element in partial view

Question

I have an id element "Remove" (in a partial view) clicking on which shall remove the producerId from a movie. When I click on it, the jquery function is not responding and nothing happens. Please help me to see what is going wrong here.

Here is my view html (_ProducerIndex.cshtml) -

@model MovieInfo.Models.Producer

@if (Model != null)
{
<table>

    <tr>
        <td>
            @Html.DisplayFor(model => model.Name)
        </td>
        <td>
            <div id="removeproducer" data-mi-producerId="@Model.ProducerId" data-mi-movieid="@ViewData["Movie"]">
                <a href="#">Remove</a>
            </div>
        </td>
    </tr>

</table>

}

And here is what my jquery is doing -

$(function () {

var removeProducer = function () {

    var $a = $(this);
    var prodId = $a.attr("data-mi-producerid");
    var mov = $a.attr("data-mi-movieId");

    var options = {
        url: "/Movie/ProducerRemove",
        contentType: "application/json",
        data: JSON.stringify({ producerId: prodId, movie: mov }),
        type: "post",
        dataType: "html"
    };

    $.ajax(options).done(function (data) {
        var $target = $("#producerindex");
        $target.html(data);
    });

    return false;
};

$("#removeproducer").on("click", removeProducer);
});

I tried putting alert statement in removeProducer function but it is not getting called.

Is your on'click' setup happening at a time after the document has finished loading? Make sure it is inside $(document).ready(). — Lochemage, Jul 16 '14 at 17:01
It is in $(document).ready() just like my other jquery functions. — Sam, Jul 16 '14 at 17:19
Where exactly can I check that? (as it so happens I am fairly new to ASP.NET MVC and JQuery). Also want to add that this html is generated from a partial view through ajax. Is it possible that might be affecting this? — Sam, Jul 16 '14 at 17:35

score 4 · Accepted Answer · answered Jul 16 '14 at 17:39

4

If your elements are pulled in via ajax, that means it is possible that your on'click' event is being assigned before the actual element exists on the document. You have to wait until after the ajax is done OR do something like

$('body').on('click', '#removeproducer', removeProducer);

instead.

Doing it the latter way binds the click event to the body, but reacts only when the #removeproducer element is clicked, it will trigger for all #removeproducer elements found in the document at any time.

answered Jul 16 '14 at 17:39

Lochemage

3,926
8
11

I got your reasoning and the point about 'waiting until after the ajax is done', but is there a way to do that? – Sam Jul 16 '14 at 18:01
It depends on how you are doing your ajax call, but there should be a function where you received the ajax response data, you would do it there (for example, in your $.ajax().done() function call). – Lochemage Jul 16 '14 at 18:16

score 2 · Answer 2 · edited May 23 '17 at 12:05

2

The issue is that you are declaring your function as a variable after your event handler declaration, and in that instance, the variable hasn't been declared yet and is therefore not available to the event handler. To fix this simply switch var removeProducer = function () { to function removeProducer() {

Here's a little more information on why this is happening

edited May 23 '17 at 12:05

Community

1
1

answered Jul 16 '14 at 17:01

Jnatalzia

1,617
7
14

Sorry for the confusion but in my actual code, the function declaration is before the call only just like you mentioned. I have lots of other jquery functions too but only this one seems to be broken. I have edited the code above. – Sam Jul 16 '14 at 17:20

score 0 · Answer 3 · answered Jul 16 '14 at 17:08

0

You should put following line after the function since removeProducer is not defined at the time you call it.

$("#removeproducer").on("click", removeProducer);

DEMO

answered Jul 16 '14 at 17:08

Saranga

3,068
1
16
26

Please see my edit above and other comments. It is still not working for me. – Sam Jul 16 '14 at 17:30
Where exactly can I check that? (as it so happens I am fairly new to ASP.NET MVC and JQuery). Also want to add that this html is generated from a partial view through ajax. Is it possible that might be affecting this? – Sam Jul 16 '14 at 17:35
Press F12 and you will be able to find console tab in your browser. Check it after clicking remove button and let me know. Are you loading _ProducerIndex.cshtml via AJAX ? – Saranga Jul 16 '14 at 17:39
Yes, I am loading it via ajax. – Sam Jul 16 '14 at 17:53
Yes, it worked. Thanks guys. I didn't know that Ajax could mess up with element binding else I would have informed in the question itself. – Sam Jul 16 '14 at 18:03

JQuery not detecting id element in partial view

3 Answers3