But two words pull into a bridge, have to double-click two times to activate the JS method

Source: Internet
Author: User

18, 2017, the sun shines high

REQUEST

VV in a Google map to do a microsite, the latitude of the study is clear, but a small problem is troubled, each time you refresh the page after clicking on the link must be clicked two times to activate the function, and then only need to point once to This little brother with the recent new Angularjs write function, scratching don't know is angularjs where out of the problem

Solution

In Google inside search "JavaScript has to click twice", unexpectedly a lot of people encounter the same problem, opened a few stackoverflow, see two of them, found that said is the same situation, "I had to click Twice to activate function using JQuery (https://stackoverflow.com/questions/28746323/) i-have-to-click-twice-to-activate-function-using-jquery) in the HTM with the onclick reference to the method of JS write, The problem occurs in the corresponding function in JS to repeatedly bind the click function. See this answer and view your own HTML and JS code

<h4>Where you ' ll find us</h4><Divclass= "Clearfix"> <spanclass= "Search-store-icon">Region:</span>  <inputtype= "text"placeholder=""name=""class= "Search-store"Ng-model= "Searchstores"Ng-change= "Timeflash ()">  <ulclass= "Storelist"Ng-show= "Searchstores.length > 0"Ng-focus= "Hasfocus=true">    <Ling-repeat= "X in stores | filter:searchstores | By: ' Region '"Ng-mouseover= "Mouseoverevent ($index)"Ng-click= "Enterkeyevent ($event)"Data-storeidx= "{{x.storeidx}}"Data-omni-type= "Microsite"Data-omni= "{{x.omn}}">{{X.name}}</Li>  </ul></Div>
Html Code
$scope. enterkeyevent =function(event) {varListarry = $ ('. Storelist>li ')); Listarry.click (function() {        varSelectlistname =$ (event.target). text (); varSelectlistidx = $ (event.target). attr (' Data-storeidx '); varLAT1 =$scope. Stores[selectlistidx].lat; varLng1 =$scope. stores[selectlistidx].lng; varSelectstoremap =$scope. Stores[selectlistidx].map; $('. Storelist '). Hide (); $('. Search-store '). Val (Selectlistname);        Storename.text ($scope. stores[selectlistidx].name);        Storegegion.text ($scope. stores[selectlistidx].region);        Storelocation.text ($scope. stores[selectlistidx].location);        Storeaddr.text ($scope. stores[selectlistidx].address);        Storephone.text ($scope. Stores[selectlistidx].tel); if(Selectstoremap = =NULL|| Selectstoremap = = Undefined | | Selectstoremap = = "'){            $(' #store-map '). Hide (); }Else{            $(' #store-map '). Show (); Storemap.attr ("SRC", Selectstoremap);    } getnearbystore (LAT1,LNG1); });};
JavaScript Incorrect Code

In the HTML "ng-click=" Enterkeyevent ($event) "" Ng-click is equivalent to the onclick, in JS positioning Listarry, and Listarry bound Cilck method, And StackOverflow mentioned in the same class, so delete unnecessary Listarry location and click Method, re-modify JS as follows:

$scope. enterkeyevent =function(event) {varSelectlistname =$ (event.target). text (); varSelectlistidx = $ (event.target). attr (' Data-storeidx '); varLAT1 =$scope. Stores[selectlistidx].lat; varLng1 =$scope. stores[selectlistidx].lng; varSelectstoremap =$scope. Stores[selectlistidx].map; $('. Storelist '). Hide (); $('. Search-store '). Val (Selectlistname);    Storename.text ($scope. stores[selectlistidx].name);    Storegegion.text ($scope. stores[selectlistidx].region);    Storelocation.text ($scope. stores[selectlistidx].location);    Storeaddr.text ($scope. stores[selectlistidx].address);    Storephone.text ($scope. Stores[selectlistidx].tel); if(Selectstoremap = =NULL|| Selectstoremap = = Undefined | | Selectstoremap = = "'){        $(' #store-map '). Hide (); }Else{        $(' #store-map '). Show (); Storemap.attr ("SRC", Selectstoremap); } getnearbystore (lat1,lng1);};
JavaScript Correct Code

Troubled VV last night, we solved the problem in half an hour, ha, because this afternoon he treats grilled fish!

But two words pull into a bridge, have to double-click two times to activate the JS method

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.