Backbone view can't run clickAction method

Question

I have a problem using backbone.js, this my code.

<div id="dx-container">
    <aside id="dx-sidebar">
        <button>SLIDE</button>
    </aside>
    <section id="dx-content">
        CONTENT CONTENT<br/>
    </section>
</div>

<script type="text/javascript" src="js/library/jquery/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="js/library/underscore/underscore-min.js"></script>
<script type="text/javascript" src="js/library/backbone/backbone-min.js"></script>
<script>
    var View = Backbone.View.extend({
        el: '#dx-content',
        initialize: function() {
            this.heloo();
        },
        events: {
            "click button": "clickAction"
        },
        heloo: function(){
            this.$el.html("Hello World");
            console.log("Hello World Sucess");
        },
        clickAction: function(e){
            this.$el.html("Click Action Success");
            console.log("Click Action Success");
        }
    });
    var tes = new View();
</script>

When button action click, backbone view can't run clickAction method, but if this method run using constructor this can run, can anyone help me, thanks.

Answer 1

Tel need to be on the #dx-container:

var View = Backbone.View.extend({
    el: '#dx-container',
    initialize: function() {
        this.heloo();
    },
    events: {
        "click button": "clickAction"
    },
    heloo: function(){
        this.$el.html("Hello World");
        console.log("Hello World Sucess");
    },
    clickAction: function(e){
        this.$el.html("Click Action Success");
        console.log("Click Action Success");
    }
});
var tes = new View();

Answer 2

I may be confused with exactly what it is your'e asking, but from what I get out of your question is that when you view your page in your editor everything works just fine, but once uploaded to the internet it stops working? If this is what you mean then more than likely it's a src="" problem.

Example: When you view your page from editor it can reference your script files because they're on your computer with your page. So, this would be fine.

<script type="text/javascript" src="js/library/jquery/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="js/library/underscore/underscore-min.js"></script>
<script type="text/javascript" src="js/library/backbone/backbone-min.js"></script>

However, once you upload your page you ALSO have to upload your .js files to the exact path that it shows above or just replace the path with the exact know location:

<script type="text/javascript" src="http://www.yoursite.com/path/to/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="http://www.yoursite.com/path/to/underscore-min.js"></script>
<script type="text/javascript" src="http://www.yoursite.com/path/to/backbone-min.js"></script>

If this is not what you are asking then I apologize, It's just a little unclear.

Answer 3

Thank you for help, button must to be on the #dx-container

var View = Backbone.View.extend({
    el: '#dx-container',
    initialize: function() {

    },
    events: {
        "click button": "clickAction"
    },
    clickAction: function(){
        this.$el.append("Click Action Success");
    }
});
var tes = new View();