Input element within an anhor

[digiguru]

I have a very simple form, I want to have a checkbox that allows the user to change status of a task by checking the textbox:

I want to be able to click the text of the task and open up more detail.

I use the following markup to achieve this:

           <ul class="edit rounded" data-bind="foreach: todos, visible: todos().length > 0">
                <li class="arrow">
                    <a data-bind="attr: { href: linkRef }">
                        <input type="checkbox" data-bind="checked: completed" />

                         <em data-bind="text: title"></em>
                    </a>
                </li>
            </ul>

Essentially I want to be able to click anywhere in the LI to open the new page EXCEPT the checkbox.

I've tried adding this:

$("[type=checkbox]").on("click", function (e) {
   e.preventDefault();
});

But that event never gets fired (it goes straight to the anchor tags href).

Any ideas how to achieve a similar result?

[digiguru]

I have a solution:

Amend the markup to remove the Link - moving it to a data element.

            <ul class="edit rounded" data-bind="foreach: todos, visible: todos().length > 0">
                <li class="arrow">
                       <input type="checkbox" data-bind="checked: completed" />
                       <em data-bind="text: title, attr : { 'data-link': linkRef }"></em>
                </li>
            </ul>

And then you create a fake click event in the EM

    $(document).on('click', 'em', function(e){
        var $e = $(e.currentTarget);
        jqt.goTo($e.data("link"), "slideleft");
    });

This doesn't bahave like a button anymore, you don't get the touch animation (where links go green). I theer a better way to do this?

[thomasyip]

Closing because it is not a common html pattern.