CODEWITHSUNDEEP
javascriptjqueryhtmllistviewhref
Hodaya Shalom
Hodaya Shalom

Reputation: 4417

Clicking on an item in the listview do not run the onclick

I have a ListView of Jquery.

Clicking on each item passes to another page:

This is the list:

I fill it in the code as follows:

function FillList() {
    var UL= $('#MyList');
    for (var i = 0; i < 3; i++) {
        var newLI = document.createElement("LI");
        UL.append(newLI);
        newLI.innerHTML = '<a href="NewPage.html" data-transition="slide" 
                           onclick="DoSomething('+i+');" >
                               <p> item number:'+i+'</p>
                          </a>';


    }
    $('#MyList').slideDown('slow');
}

The function DoSomthing:

function DoSomething(numberLi)
{
  alert(numberLi);
}

Function DoSomething not run when click on an item in the list,

it makes the move to another page without first entering the function DoSomething

why?

UPDATE:

Even when the code looks like this: 

        newLI.innerHTML = '<a href="NewPage.html" data-transition="slide" 
                           onclick="alert('aaa');" >
                               <p> item number:'+i+'</p>
                          </a>';

The alert does not appear..

Upvotes: 0

Views: 401

Answers (3)

Hodaya Shalom
Hodaya Shalom

Reputation: 4417

The problem was solved

I sent him a space variable and therefore the function did not work for me ..

It was not in question so you could not know that,

thanks anyway

Upvotes: 0

phnkha
phnkha

Reputation: 7882

It's because inline event registration requires you to write JavaScript behavior code in your XHTML structure layer. See more at: http://www.quirksmode.org/js/events_early.html.

See demo here http://jsfiddle.net/8t2Ye/3/

HTML: 

<a onclick="test1();">test 1</a>
<p>
<a onclick="test2();">test 2</a>

<script>
    function test1(){
        alert('test 1');
    }
</script>

JS(external):

function test2(){
    alert('test 2');
}

Only test1 is triggered.

Update

It seems your code has syntax error. Try my demo here http://jsfiddle.net/en7VU/1/

Upvotes: 1

Austin Brunkhorst
Austin Brunkhorst

Reputation: 21130

The event won't be triggered as long as it's navigating to the new page. What you could do is pass the anchor element as a parameter and then navigate to the URL after the function is done, like so.

newLI.innerHTML = '<a href="NewPage.html" data-transition="slide" 
                           onclick="DoSomething(this, '+ i +');" >
                               <p> item number:'+ i +'</p>
                          </a>';

And the function.

function DoSomething(anchor, numberLi) {
    alert(numberLi);

    window.location.href = anchor.href; 

    return false;
}

Upvotes: 0

Related Questions