Trigger click sometimes not working

Question

I have a strange problem with my AngularJS project. I have 2 buttons that trigger inputs below.

<button type="button" class="btn btn-primary" data-ng-click="triggerInput('B1')">B1</button>
<input id="b1Input" type="file" accept="image/*" class="hide" onchange="angular.element(this).scope().changeImage(this)" />

<button type="button" class="btn btn-primary" data-ng-click="triggerInput('B2')">B2</button>
<input id="b2Input" type="file" accept="image/*" class="hide" onchange="angular.element(this).scope().changeImage(this)" />

I tried to debug the JS code, but it seems to be okay. Unfortunatelly, Sometimes I have to click chosen button couple times (2-4) to make the input open. Maybe the jQuery selector is bad?

Here's the code:

$scope.triggerInput = function (type) {
    $timeout(function () {
        var selector = "";
        switch (type) {
            case "B1":
                selector = "b1Input";
                break;
            case "B2":
                selector = "b2Input";
                break;
        }

        $("input[id='" + selector + "']").trigger("click");
    });
};

create a directive put your dom related logic there instead of doing what you are doing .. — Anik Islam Abhi, Nov 02 '15 at 08:45
Will it change anything? I think this solution should work as well — Nickon, Nov 02 '15 at 08:48
may be or may be not .. sometime `angular.element(this).scope()` need timeout to execute. — Anik Islam Abhi, Nov 02 '15 at 08:49
that input won't effect onclick's `angular.element(this).scope().changeImage(this)` this portion also need timeout to call `changeImage` — Anik Islam Abhi, Nov 02 '15 at 08:52
Ok, but changeImage is triggered after I chose an image. I have problems with openning a dialog when I can select my images.\ — Nickon, Nov 02 '15 at 09:11

score 1 · Accepted Answer · edited May 23 '17 at 11:44

1

You should not use this line(which is below) into controller. I think you can write a directive to populate this.

$("input[id='" + selector + "']").trigger("click");

Correct your code

<button type="button" class="btn btn-primary" data-ng-click="triggerInput('B2',$event)">B2</button>


$scope.triggerInput = function (type,e) {
    $timeout(function () {
        var selector = "";
        switch (type) {
            case "B1":
                selector = "b1Input";
                break;
            case "B2":
                selector = "b2Input";
                break;
        }

       angular.element(e.target).siblings('#'+selector).trigger('click');
       //or simply write this
       //$("#"+selector).trigger("click");
    });
};

edited May 23 '17 at 11:44

Community

1
1

answered Nov 02 '15 at 10:12

Shohel

3,886
4
38
75

Thank you, sir. Could you explain why I shouldn't use this line `$("input[id='" + selector + "']").trigger("click");`? How this differs from `$("#"+selector).trigger("click");`? – Nickon Nov 02 '15 at 10:30
Yes, it is. But I can't understand why – Nickon Nov 02 '15 at 12:46

Trigger click sometimes not working

1 Answers1