MVC3- Using jQuery to add onclick event to a link

Question

Obviously I'm doing something wrong. I've never been able to get .click() to work, but other jQuery calls work fine.

I have the following Javascript function:

    function showParamsFor(divID) {
       //Code here works when the function is called through onclick attribute
    }

Then, I basically have the following scenario:

    int index = 0;
    foreach (var op in Model.Operations)
    {
       <div id="param_container[@(index)]"
          <a id="show_params[@(index)]" href="#">
             Edit Parameters
          </a>
       </div>
       index++;
    }

    int total = index;
    <script type="text/javascript" src="~/Scripts/jquery-1.6.2.min.js"></script>
    for (int i = 0; i < total; i++)
    {
        <script type="text/javascript">
            $(document).ready($('#show_params[@(i)]').click(function () {
                showParamsFor('#param_container[@(i)]');
            });
        </script>
    }

For the life of me, I can't seem to get this to work. Aside from .click(), I've tried using the following methods:

.live('click', function()) 
.bind('click', function())

I've tried removing $(document).ready and adding it back in each scenario, but nothing happens when the link is clicked.

I've double checked my id names and even tried using a class name for the link (.show_params[@(i)]) instead of the id. Whaat am i doing wrong here?

EDIT

I'm using a loop because I have a dynamic list of these links. I need to bind a click event to each after they have ALL been created because each link needs a reference to each of the other links.

You realize you are embedding as many scripts as there are indexes right? That seems like a bad way to do it. — TheZ
– TheZ, Commented Jul 6, 2012 at 20:09
You can run a razor for loop inside a script tag, so that you have one script with one document.ready event, calling the method N times. There are better ways still, but that would at least cut down on the scripts. — Kyeotic
– Kyeotic, Commented Jul 6, 2012 at 20:11
Does ViewBag.index return unique indexes? If it does, just set the id of the anchor tag to the index then pass that to showParamsFor(). Or use the html5 data parameter and have the id pulled from that (not sure if jquery 1.6 supports it though) — Matt R
– Matt R, Commented Jul 6, 2012 at 20:14
Yeah, i realize that, but when i try to run the razor loop inside the tags, i goes out of context. I didn't really want to mess around with that at the moment because that's not my the heart of the problem. — Mr Jones
– Mr Jones, Commented Jul 6, 2012 at 20:16
What exactly happens when you click on the link? Does it not go anywhere or what? — nikeaa
– nikeaa, Commented Jul 6, 2012 at 20:16

Shyju · Accepted Answer · 2012-07-06 20:34:45Z

2

I will add a css class to the a tag so that i can use that for my jQuery selectors to bind the click functionality.

foreach (var op in Model.Operations)
{
   <div id="param_container[@(ViewBag.Index)]"
      <a id="show_params[@(ViewBag.index)]" href="#" class="thatClass">
         Edit Parameters
      </a>
   </div>
   ViewBag.Index++;
}

Your script should be

$(function(){
  $(".thatClass").click(function(e){
     e.preventDefault()'; //if you want to prevent default behaviour
     var item=$(this);
     alert(item.attr("id");
     alert(item.parent().attr("id");

  });
});

this should work

Not sure why you use the ViewBag items for giving the Id of the elements! .

If you have an ID (some other property to give you the unique value, you should consider using that like this (Assuming you have an ID property which has Unique values for each items in the collection)

foreach (var op in Model.Operations)
{
   <div id="[email protected]"
      <a id="[email protected]" href="#" class="thatClass">
         Edit Parameters
      </a>
   </div>       
}

IMHO, the above code looks cleaner than the one with using ViewBag

edited Jul 6, 2012 at 20:34

answered Jul 6, 2012 at 20:29

Shyju

220k106 gold badges421 silver badges499 bronze badges

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

2 Comments

Mr Jones Over a year ago

I'm using an editor template, and the link is being created inside of that. Whereas the script is created in the original view. The only way for me to pass the values is through the ViewBag. That being said.. I'm not really sure what you're doing with this code. How do you suggest i reference my showParamsFor() function?

Mr Jones Over a year ago

I removed references to the ViewBag for clarity.

sleepwalker · Accepted Answer · 2012-07-06 21:07:59Z

0

Still don't understand, why do you wanna use a custom loop here. Jquery code will be enough here. First, add your elements. Then, your document ready should look something like this:

        $(document).ready(function() {
            $('a[id^=link]').live('click', function(data) {
                alert($('#links').children().index(this));
            });
        });

UPD The small sample is here: http://jsbin.com/ahafel/2

edited Jul 6, 2012 at 21:07

answered Jul 6, 2012 at 20:47

sleepwalker

1,0321 gold badge9 silver badges16 bronze badges

Comments

Mr Jones · Accepted Answer · 2012-07-16 18:06:57Z

Thanks for the responses, but I've figured out my problem.

I was passing '#param_container[@(i)]' into my showParamsFor function when I should have been passing 'param_container[@(i)]' into it. No hash tag.
A more impotant problem... The brackets in my id's weren't being recognized by jQuery. I read that you can use \\ as an escape characer before the brackets, but naturally.. that didn't work for me. I changed my id's from 'param_container[@(i)]' to 'param_container-@(i)'.

Everything seems to be fine. Here's my final script:

    <script type="text/javascript" src="~/Scripts/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
        for (var i = 0; i < total; i++)
        {
            $(document).ready(function() {
               $('#show_params-'+i).live('click', function (data) {
                    showParamsFor('param_container-'+i);
                });
            });
        }
    </script>

Collectives™ on Stack Overflow

MVC3- Using jQuery to add onclick event to a link

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related