click event auto triggered on knockoutjs

Question

I'm trying on mail client tutorial on learn.knockoutjs.com. I want to add a "back button" in mail detail block. But that button is auto triggered.

my codes

<div class="viewMail" data-bind="with: chosenMailData">
    <button data-bind="click: alert('derp')">derp</button>
    <div class="mailInfo">
        <h1 data-bind="text: subject"></h1>
        <p><label>From</label>: <span data-bind="text: from"></span></p>
        <p><label>To</label>: <span data-bind="text: to"></span></p>
        <p><label>Date</label>: <span data-bind="text: date"></span></p>
    </div>
    <p class="message" data-bind="html: messageContent" />
</div>

when i set chosenMailData viewMail div is show. But same time browser alert "derp". I want to when i click button, browser alert at that time. what is wrong?

Answer 1

The alert code will be executed when the with binding renders the content.

Either wrap it in a function or move it to a function in the view model

<button data-bind="click: function() { alert('derp'); }">derp</button>