ansaurus

Question

Answer 1

+2 A:

Can you try

$("imgTick").onclick = updateTickClick;

I'm thinking the adding of an event handler may require an actual DOM reference rather than something built out of innerHTML.

--Edit

Looks like the problem is in your selecting of parentRow and rowData - here's my simplified example which works for me in both FF3.5 and IE7. The only change is how rowData is selected:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Testing onclick</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript">
    function ToggleData(e){
        var rowData = $('td');
        var html = $("<input type='text' id='amendedval' value='" + $.trim(rowData.text()) +"'/>");
        //Add the update tick
        var imgTick = $("<img src='tick.png' id='imgTick'/>");
        rowData.text('');
        rowData.append(html);
        rowData.append(imgTick);
        imgTick.click(updateTickClick);
    };
    function updateTickClick(e) {
        alert('hi');
    };
    </script>
</head>
<body>
    <table>
        <tr>
            <td><a href="#" onclick="ToggleData(this); return false;">Click me</a></td>
        </tr>
    </table>
</body>
</html>

robertc 2009-07-02 13:20:45

Still the same issue no event being fired.

RubbleFord 2009-07-02 13:24:59

He's using jQuery's click event binder(instead of the onclick DOM one). imgTick should be part of the DOM anyway, since it's appended to rowdata.

Robert Massa 2009-07-02 13:27:57

How about without the quotes around imgTick? I suggest you check out Firebug (http://getfirebug.com), its debugger is really useful for eliminating bugs like this.

nikc 2009-07-02 13:36:00

OK, so 'imgTick = $("<img src='../images/tick.png' id='imgTick'/>");' is equivalent to 'document.createElement("IMG")'? jQuery parses the string and then creates and returns a DOM element rather than inserting it into the document with innerHTML?

robertc 2009-07-02 13:40:08

Answer 2

A:

imgTick.bind("click", function(){
alert ( "Clicked" );
});

rahul 2009-07-02 13:22:21

Answer 3

A:

it can be a callback registered with or without anonymous function

dhaval 2009-07-02 13:22:43

Why does it *need* to be? I thinks it's perfectly valid to pass a function reference.

Robert Massa 2009-07-02 13:26:17

An anonymous function is not required, function reference is perfectly legal.

nikc 2009-07-02 13:34:10

Without live as Tony has pointed out , a function callback is required to register for events whose firing is unknown at start. needs be is changed to can be

dhaval 2009-07-02 20:31:40

Answer 4

A:

Did you try debugging in VS to see whats going on here. The information provided here seems incomplete to deduce anything. For a div with id imgTick, I would do this in jQuery for a click event :

$('#imgTick').click(function({

alert('Hi');

});

theraneman 2009-07-02 13:24:40

I think the selector used for getting the imgTick variable is incorrect? Shouldn't it be just $('#imgTick').

theraneman 2009-07-02 13:35:29

Answer 5

+1 A:

Your imgTick is being added dynamically to the page. Instead of using .click(), try using .live:

   imgTick.live("click", updateTickClick);

And, no, contrary to what dhaval said, it does NOT have to be anonymous.

Tony Miller 2009-07-02 13:25:31

that's what I thought but thought I would check.

RubbleFord 2009-07-02 13:30:01

He is binding the click after the element is added to the page.

Daniel Moura 2009-07-02 13:30:20

Answer 6

A:

Changed var rowData = $(':nth-child(2)',parentRow); To var rowData = $('td:nth-child(2)',parentRow);

Now the click event is occuring correctly.

RubbleFord 2009-07-02 14:12:49

ansaurus

tags:

views:

answers:

Jquery and click event.

related questions