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.

Answer 1

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>