CODEWITHSUNDEEP
jqueryasp.net-mvc-3click
Mr Jones
Mr Jones

Reputation: 1198

MVC3- Using jQuery to add onclick event to a link

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.

Upvotes: 0

Views: 6030

Answers (3)

Mr Jones
Mr Jones

Reputation: 1198

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

  1. I was passing '#param_container[@(i)]' into my showParamsFor function when I should have been passing 'param_container[@(i)]' into it. No hash tag.

  2. 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>

Upvotes: 0

sleepwalker
sleepwalker

Reputation: 1032

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

Upvotes: 0

Shyju
Shyju

Reputation: 218722

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

Upvotes: 2

Related Questions