JQuery change function never called

Question

I have very simple Jquery code and it never shows the second alert. Is anybody know what is wrong?

       <script type="text/javascript">
            $(document).ready(function () {
                alert("1");
                $(".images_clicable input").change(function(){
                      alert("2");
                }); 
            });
            $(".images_clicable input").change(function(){
                 alert("2");
            }); 
        </script>
        <div> 
            <div class="images_clicable addPhoto">                    
                <label for="label_image1">
                    <img class="img_preview" id="image1" src="./img/plus.png" height="100px">
                </label>
                <input name="image1" id="label_image1"  type="file">                    
            </div>
         </div>

This code is inside angular view.

This code is inside view that changed by angular. I am not angular guru, and do not know if it matters. — yu.pitomets, Sep 30 '14 at 20:47
I have the same example in different application and it works without angular. — yu.pitomets, Sep 30 '14 at 20:48
1) this has nothing to do with angular 2) if you put the "$(".images_clicable input").change" inside the "$(document).ready(function () {" it will work 3) Every time that someone that uses Angular also tries to have a jQuery "$(document).ready" for registering event changes for the form fields of an Angular form an Angel dies! Please stop killing Angels! — Josep, Sep 30 '14 at 20:51
Josep, "$(".images_clicable input").change already inside document.ready function and it doesn't work. — yu.pitomets, Sep 30 '14 at 20:53
Seems to work fine [on this fiddle](http://jsfiddle.net/sk5z7602/). Is there something different in your code? — Dave, Sep 30 '14 at 20:54
@user1315599 no, it's not, at least not in the code that you just shared, but please, please, please, if you're using Angular don't do that, please stop killing angels! http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background — Josep, Sep 30 '14 at 20:54
Also perfectly fine on this plunkr - http://plnkr.co/edit/OCOEPLBiFkpb9HMi6Mfc?p=preview - you should be showing the angular stuff this is along side. Good chance there is a directive at play. — Darren Wainwright, Sep 30 '14 at 20:55

score 0 · Answer 1 · answered Sep 30 '14 at 21:27

0

The reason that you're having problems is that you're not doing things in an AngularJS way, but you are doing them in a jQuery way. What you're trying to accomplish in Angular should probably be accomplished using directives instead. From within a directive, you can access a jqLite interface for jQuery that will encompass 90% of anything that you could want to do with jQuery.

Here is an example directive:

app.directive('alertOnChange', function() {
  return function(scope, element, attrs) {
    element.on('change', function() {
      alert("It works!");
    });
  };
});

Here is the modified <input> tag:

<input alert-on-change name="image1" id="label_image1"  type="file">

Here is a plunker.

answered Sep 30 '14 at 21:27

Bobby

1,439
2
16
30

I have already wrote code on Javascript, but still do not understand why itt does not work. Angular this is also JS, is not it? So why it is impossible to call JS code from angular? plnkr.co/edit/46keW5QzHNnSJBTrjhXi – yu.pitomets Sep 30 '14 at 21:51
Here is an example of file uploads: https://egghead.io/lessons/angularjs-file-uploads. Also, this might help, if you haven't seen it already: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background?lq=1 – Bobby Sep 30 '14 at 22:01

score 0 · Answer 2 · answered Sep 30 '14 at 21:46

This code works for me, and I am not familiar with angular to rewrite in angular way.

  function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        //check the name of input

        var input_name = $(input).attr('name');
        reader.onload = function (e) {
            $('#'+input_name).attr('src', e.target.result);
            $('#label_'+input_name).attr('value', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

    $(".images_clicable input").change(function(){
        readURL(this);
    });

JQuery change function never called

2 Answers2