KnockoutJS数据绑定：点击javascript点击

Question

Let us say we have a table as so

<table>
    <tbody data-bind="foreach: orderItems">
        <tr class='datarow'>
            <td data-bind="text: whatever"></td>
            <td><a id='anchor' href='#' data-bind='click: $root.save' onclick='alert("a");'>Text</a></td>
        </tr>
    </tbody>
</table>

so when I do

document.getElementsById('anchor').click();

the alert triggers but $root.save doesn't. Any ideas?

Answer 1

Try This

<script type="text/javascript">
    var viewModel = {

        Save: function() {

            alret("Hello");
        }
    };
ko.applyBindings(new MyViewModel());
</script>
<table>
    <tbody data-bind="foreach: orderItems">
        <tr class='datarow'>
            <td data-bind="text: whatever"></td>
            <td><a id='anchor' href='#' data-bind='click: $root.save' onclick='alert("a");'>Text</a></td>
        </tr>
    </tbody>
</table>

Answer 2

I'm seeing 2 problems with the code:

1. getElementsById - are you sure this method exists?

Each ID should only exist once on the page. When you want to find an element by it's ID, you can call getElementById (singular), and it will return an element. Because only one element should have a given ID, there is no getElementsById (plural) method.

Your foreach binding combined with a hardcoded 'anchor' id will result in multiple elements with an ID of anchor. This is a no-no. Perhaps use a class of 'anchor' instead of an id of 'anchor'.

<a class='anchor' href='#' data-bind='click: $root.save' onclick='alert("a");'>Text</a>

So my guess is that getElementsById is not returning anything to click on.

1. click()

Even if you were able to get an element back from the getElementsById, there is no click() method on those elements.

As an alternate, you can use jQuery to get the elements, and with a jQuery object you can call the click() method. Or you could take an element returned from getElementById, wrap it in jQuery, then call click().

$('.anchor').click();

Here is a working example: http://jsfiddle.net/tlarson/t4yZL/1/

Answer 3

<table>
    <tbody data-bind="foreach: orderItems">
        <tr class='datarow'>
            <td data-bind="text: whatever"></td>
            <td><a id='anchor' href='#' onclick='alert("a"); viewModel.save(ko.dataFor(this));'>Text</a></td>
        </tr>
    </tbody>
</table>

• Assume that you stored your viewModel elsewhere.
• ko.dataFor(element) - returns the data that was available for binding against the element

You may have a look at this link