Boostrap 3: Click over button doesn't work

Question

I'm working on a web application which uses AngularJS and Twitter Bootstrap. My app works fine with Firefox, but with Chrome or Chromium (my operation system is Ubuntu) when I click button, this click is not detected correctly. The click is detected but the object event is null or is not detected. As you can see, it only writes evento: but not the id. In Firefox it writes evento: and the id correctly.

HTML:

<button id = "removeLeftTables" ng-click = "hmCtrl.changeView($event)">
    <span class="glyphicon glyphicon-remove " aria-hidden="true" style = "vertical-align: middle; font-size: 25px"></span>
</button>

JS:

self.changeView = function(event){
    console.log("evento: " + event.target.id);
    if (event.target.id == "removeLeftTables"){
        self.show_left_tables = false;
        self.style_left_content = "";
        self.style_right_content = "";
        self.style_tables_content = "";     
        self.cleanTabStyles();
    }

    if (event.target.id == "removeRightTables"){
        self.show_right_tables = false;
        self.style_right_content = "";
        self.style_left_content = "";
        self.style_tables_content = ""; 
        self.cleanTabStyles();
    }
}

I have made this plunker using the same code to check the error and it works: https://plnkr.co/edit/vbBhVCrkpLyRl63Lwlur

I don't understand anything. Why is it not working in my web application while in the plunker works fine? What happend?

Edit 1: My goal is to get the id of the object over I have made a clic. With Firefox, Chrome and Chromium. Right now, the id from the event is retrieved only by Firefox. With Chrome and Chromium the event is fired by I can't retrieve the id from the object event.

Edit 2: I have added a trace to my code to know is event variable is null or not and when I make click in Chrome o Chromium event variable is not null but the id is not detected!!!

    $scope.changeView = function(event){
    if (event == null)
        console.log("event is NULL");
    else
        console.log("event IS NOT NULL");
    console.log("evento: " + event.target.id);
    if (event.target.id == "removeLeftTables"){
        self.show_left_tables = false;
        self.style_left_content = "";
        self.style_right_content = "";
        self.style_tables_content = "";     
        self.cleanTabStyles();
    }

    if (event.target.id == "removeRightTables"){
        self.show_right_tables = false;
        self.style_right_content = "";
        self.style_left_content = "";
        self.style_tables_content = ""; 
        self.cleanTabStyles();
    }
}

score 1 · Accepted Answer · answered Apr 01 '16 at 19:24

1

You can try by currentTarget instead of target. Because of currentTarget get the element whose event listeners triggered a specific event

self.changeView = function(event) {
    console.log("evento: " + event.currentTarget.id);
};

It may help you

answered Apr 01 '16 at 19:24

Shaishab Roy

16,335
7
50
68

Yeeeeeees!!!! It works fine with Firefox, Chrome and Chromium!!! Thank you so much for your appreciated help!!! – José Carlos Apr 01 '16 at 20:11

score 0 · Answer 2 · answered Apr 01 '16 at 18:17

0

Take a look at fixed fiddle: https://plnkr.co/edit/QftJvAhSYmfq57zknWq8?p=preview

In common case you should use $scope.checkClick() in controllers instead of this.checkClick():

$scope.checkClic = function(obj) {
    console.log("obj: " + obj);
};

and there is no point to call method in html like ctrl.methodName().

You can just do:

<button ng-click = "checkClick('Button Clicked!!!')">

Using this allowed only at services. Even in factories you shouldn't use this (use return {a:..., b: function(){...}} syntax.

In controllers or directives you should use $scope (or scope for directives) to provide your methods to html

answered Apr 01 '16 at 18:17

S Panfilov

16,641
17
74
96

OP is using controller as (alias) syntax in which `this` will refer to controller and any function or variable attached to `this` in controller should be accessible from view using alias name. – Subash Selvaraj Apr 01 '16 at 18:26
Thank you Sergey!!! But my goal is to detect the event and this is not detected even If I make the changes that you have been post. With your changes, in Firefox works fine, but in Chrome or Chomium doesn't work :( – José Carlos Apr 01 '16 at 18:32

Boostrap 3: Click over button doesn't work

2 Answers2