IE में पहचानने के लिए jQuery प्राप्त करना। IE में .change ()

Question

जब एक रेडियो बटन समूह बदल / क्लिक किया जाता है तो मैं तत्वों को छिपाने और दिखाने के लिए jQuery का उपयोग कर रहा हूं। यह फ़ायरफ़ॉक्स जैसे ब्राउज़रों में ठीक काम करता है, लेकिन IE 6 और 7 में, कार्रवाई केवल तब होती है जब उपयोगकर्ता तब पृष्ठ पर कहीं और क्लिक करता है।

विस्तृत करने के लिए, जब आप पृष्ठ को लोड करते हैं, तो सब कुछ ठीक दिखता है। फ़ायरफ़ॉक्स में, यदि आप एक रेडियो बटन पर क्लिक करते हैं, तो एक तालिका पंक्ति छिपाई जाती है और दूसरे को तुरंत दिखाया जाता है। हालाँकि, IE 6 और 7 में, आप रेडियो बटन पर क्लिक करते हैं और तब तक कुछ नहीं होगा जब तक आप पृष्ठ पर कहीं क्लिक नहीं करते। इसके बाद ही IE संबंधित तत्वों को छिपाते और दिखाते हुए पृष्ठ को फिर से तैयार करता है।

यहाँ jQuery का उपयोग कर रहा हूँ:

$(document).ready(function () {
  $(".hiddenOnLoad").hide();

  $("#viewByOrg").change(function () {
    $(".visibleOnLoad").show();
    $(".hiddenOnLoad").hide();
  });

  $("#viewByProduct").change(function () {
    $(".visibleOnLoad").hide();
    $(".hiddenOnLoad").show();
  });
});

यहां XHTML का वह हिस्सा है जो इसे प्रभावित करता है। पूरा पृष्ठ XHTML 1.0 सख्त के रूप में मान्य है।

<tr>
  <td>View by:</td>
  <td>
    <p>
      <input type="radio" name="viewBy" id="viewByOrg" value="organisation"
      checked="checked" />Organisation</p>
    <p>
      <input type="radio" name="viewBy" id="viewByProduct" value="product" />Product</p>
  </td>
</tr>
<tr class="visibleOnLoad">
  <td>Organisation:</td>
  <td>
    <select name="organisation" id="organisation" multiple="multiple" size="10">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  </td>
</tr>
<tr class="hiddenOnLoad">
  <td>Product:</td>
  <td>
    <select name="product" id="product" multiple="multiple" size="10">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  </td>
</tr>

यदि किसी के पास कोई विचार है कि यह क्यों हो रहा है और इसे कैसे ठीक किया जाए, तो उन्हें बहुत सराहना मिलेगी!

Answer 1

के .clickबजाय का उपयोग करने का प्रयास करें .change।

Comments

@samjudson, मेरे परीक्षण में यह सही नहीं है और जब मैं तीर कुंजियों का उपयोग करके अगला रेडियो बटन चुनता हूं तो jquery का क्लिक ट्रिगर हो जाता है। (विस्टा,

— यानी

@ पेसिफ़िका: आईई 7 में मेरे लिए नहीं। कम से कम उसे वह अधिकार मिल जाता है। "क्लिक" "परिवर्तन" से पूरी तरह से अलग घटना है और कम से कम कुछ मामले हैं (यदि सभी नहीं हैं) जहां यह एक अनुचित विकल्प है।

— बॉबी जैक

@samjudson: रेडियो बटन पर घटनाओं पर क्लिक करें और कीबोर्ड का उपयोग करते समय चेकबॉक्स भी आग लगाते हैं। सभी ब्राउज़रों में काम करता है

— फिलिप लेबेर्ट

मैं सही खड़ा हूँ - यह मामला प्रतीत होता है, हालांकि यह सहज हो सकता है!

— बॉबी जैक

यह इस विशेष प्रश्न का सबसे लोकप्रिय उत्तर लगता है लेकिन यह पूरी तरह से सही नहीं है! clickइससे अलग changeहै कि इसके इवेंटहैंडलर को पहले से चयनित विकल्प पर क्लिक करते समय भी बुलाया जाएगा change। इस उत्तर में .dataपुराने और नए मूल्यों की तुलना करने के लिए jQuery का उपयोग करने का एक उदाहरण है ।

— लाउजिन

Answer 2

के clickबजाय घटना का उपयोग करने के साथ समस्याchangeयदि आप उसी रेडियो बॉक्स का चयन करते हैं (यानी वास्तव में नहीं बदला गया है) तो आपको । इसे फ़िल्टर किया जा सकता है यदि आप जांचते हैं कि नया मूल्य पुराने से अलग है या नहीं। मुझे यह थोड़ा कष्टप्रद लगता है।

यदि आप changeईवेंट का उपयोग करते हैं , तो आप देख सकते हैं कि IE में किसी अन्य तत्व पर क्लिक करने के बाद यह परिवर्तन को पहचान लेगा। यदि आप ईवेंट blur()में कॉल करते हैं click, तो यह changeईवेंट को आग का कारण बना देगा (केवल अगर रेडियो बॉक्स वास्तव में एक बदला हुआ है)।

यहाँ मैं यह कैसे कर रहा हूँ:

// This is the hack for IE
if ($.browser.msie) {
  $("#viewByOrg").click(function() {
    this.blur();
    this.focus();
  });
}

$("#viewByOrg").change(function() {
  // Do stuff here
});

अब आप सामान्य की तरह परिवर्तन की घटना का उपयोग कर सकते हैं।

संपादित करें: एक्सेसिबिलिटी समस्याओं को रोकने के लिए फ़ोकस करने के लिए कॉल जोड़ा गया (नीचे बॉबी की टिप्पणी देखें)।

Comments

यह एक बहुत ही दुष्ट हैक है, क्योंकि यह आपके उपयोगकर्ताओं को कीबोर्ड का उपयोग करने से रोकता है, क्योंकि रेडियो बटन का चयन करने के बाद फ़ोकस गायब हो जाता है।

— फिलिप लेबेर्ट

यह बहुत अच्छा है, लेकिन यह कीबोर्ड एक्सेसिबिलिटी समस्याओं का कारण बनता है। एक बार ब्लर () घटना को निकाल दिया गया है, रेडियो बटन अब फोकस्ड नहीं है, इसलिए कीबोर्ड के साथ रेडियो बटन के बीच चलना बेहद अजीब हो जाता है। मेरा वर्तमान समाधान "this.focus ();" धब्बा () कथन के तुरंत बाद।

— बॉबी जैक

मुझे लगता है कि अभिगम की समस्याओं के कारण यह सबसे खराब समाधान है।

— फिलिप लेबेर्ट

लेकिन ध्यान केंद्रित करने के लिए एक कॉल के साथ पहुंच की समस्या का समाधान किया जा सकता है ()। यह सब कुछ के लिए क्लिक () का उपयोग करने के रूप में कम से कम अच्छा है।

— बॉबी जैक

धन्यवाद बॉबी, मैं इसे उत्तर में जोड़ दूंगा।

— मार्क ए। निकोलोसी

Answer 3

क्या आपने IE के ऑनप्रॉपर्टीचेंज इवेंट की कोशिश की है? मुझे नहीं पता कि क्या इससे कोई फर्क पड़ता है, लेकिन यह शायद एक कोशिश के लायक है। IE परिवर्तन की घटना को ट्रिगर नहीं करता है जब मूल्यों को जेएस कोड के माध्यम से अपडेट किया जाता है लेकिन शायद ऑनप्रोपर्टीचेंज इस उदाहरण में काम करेगा।

$("#viewByOrg").bind($.browser.msie? 'propertychange': 'change', function(e) {
  e.preventDefault(); // Your code here 
}); 

Comments

"क्लिक करें" काम नहीं कर रहा था, लेकिन "प्रॉपर्टीचेंज" ने किया। धन्यवाद!

— जेम्स किंग्सबेरी

मैं IE8 में यह कोशिश की यह काम नहीं कर रहा है। यह फंक्शन के अंदर नहीं आ रहा है।

— अरुण

Answer 4

यह भी काम करना चाहिए:

$(document).ready(function(){
   $(".hiddenOnLoad").hide();
   $("#viewByOrg, #viewByProduct").bind(($.browser.msie ? "click" : "change"), function () {
                        $(".visibleOnLoad").show();
                        $(".hiddenOnLoad").hide();
                    });
});

धन्यवाद पियर। यह बहुत मददगार था।

Comments

यह कम से कम, वर्तमान में स्वीकृत / उच्चतम मत वाले की तुलना में बहुत बेहतर उत्तर है। यह 'केवल' IE के तहत कीबोर्ड एक्सेसिबिलिटी को तोड़ता है, बल्कि सभी अच्छे ब्राउज़रों के लिए भी।

— बॉबी जैक

... हालाँकि, यह सिर्फ पियर के जवाब की एक प्रति नहीं है?

— बॉबी जैक

सहमत, यह पियर का थोड़ा कम पठनीय संस्करण है, लेकिन दोनों चयनकर्ताओं को एक कॉल में बाध्य किया गया है।

— ट्रिस्टन वार्नर-स्मिथ

कीबोर्ड समर्थन को जोड़ने के clickसाथ बदलें click keyup keypress।

— aloisdg

Answer 5

IE में आप क्लिक इवेंट का उपयोग करना चाहिए, अन्य ब्राउज़रों में onchange। आपका कार्य बन सकता है

$(document).ready(function(){
   $(".hiddenOnLoad").hide();
   var evt = $.browser.msie ? "click" : "change";
   $("#viewByOrg").bind(evt, function () {
                        $(".visibleOnLoad").show();
                        $(".hiddenOnLoad").hide();
                    });

   $("#viewByProduct").bind(evt, function () {
                        $(".visibleOnLoad").hide();
                        $(".hiddenOnLoad").show();
                    });     
});

Comments

कीबोर्ड समर्थन को जोड़ने के clickसाथ बदलें click keyup keypress।

— aloisdg

Answer 6

इस प्लगइन जोड़ें

jQuery.fn.radioChange = function(newFn){
    this.bind(jQuery.browser.msie? "click" : "change", newFn);
}

फिर

$(function(){
    $("radioBtnSelector").radioChange(function(){
        //do stuff
    });
});

Answer 7

इनपुट टेक्स्ट के साथ मेरा भी यही मुद्दा था।

मैं बदल गया:

$("#myinput").change(function() { "alert('I changed')" });

सेवा

$("#myinput").attr("onChange", "alert('I changed')");

और मेरे लिए सब कुछ ठीक चल रहा है!

Answer 8

जब तत्व को क्लिक किया जाता है, तो IE को परिवर्तन की घटना को बताने के लिए यह एक सरल तरीका है:

if($.browser.msie) {
    $("#viewByOrg").click(function() {
        $(this).change();
    });
}

अधिक विस्तृत तत्वों के साथ काम करने के लिए आप इसे कुछ और सामान्य चीज़ों तक विस्तारित कर सकते हैं:

if($.browser.msie) {
    $("input, select").click(function() {
        $(this).change();
    });
    $("input, textarea").keyup(function() {
        $(this).change();
    });
}

Answer 9

मुझे पूरा यकीन है कि यह IE के साथ एक ज्ञात मुद्दा है। onclickईवेंट के लिए हैंडलर जोड़ना समस्या को ठीक करना चाहिए:

$(document).ready(function(){

    $(".hiddenOnLoad").hide();

    $("#viewByOrg").change(function () {
        $(".visibleOnLoad").show();
        $(".hiddenOnLoad").hide();
    });

    $("#viewByOrg").click(function () {
        $(".visibleOnLoad").show();
        $(".hiddenOnLoad").hide();
    });

    $("#viewByProduct").change(function () {
        $(".visibleOnLoad").hide();
        $(".hiddenOnLoad").show();
    });     

    $("#viewByProduct").click(function () {
        $(".visibleOnLoad").hide();
        $(".hiddenOnLoad").show();
    });     
});

Answer 10

IE में, "परिवर्तन" ईवेंट को ट्रिगर करने के लिए रेडियो और चेकबॉक्स को बाध्य करें:

if($.browser.msie && $.browser.version < 8)
  $('input[type=radio],[type=checkbox]').live('click', function(){
    $(this).trigger('change');
  });

Answer 11

1.6 के रूप में jquery के रूप में यह अब एक समस्या नहीं है .. निश्चित नहीं है कि यह कब तय किया गया था .. हालांकि इसके लिए भगवान का शुक्र है

Answer 12

यदि आप अपने jQuery संस्करण को 1.5.1 में बदलते हैं, तो आपको अपना कोड समायोजित नहीं करना पड़ेगा। तो IE9 wil सुनो सिर्फ सही:

$(SELECTOR).change(function() {
    // Shizzle
});

http://code.jquery.com/jquery-1.5.1.min.js

Answer 13

चाल के साथ काम करता है ... लेकिन अगर आप रेडियो या चेकबॉक्स की सही स्थिति प्राप्त करना चाहते हैं, तो आप इसका उपयोग कर सकते हैं:

(function($) {
    $('input[type=checkbox], input[type=radio]').live('click', function() {
       var $this = $(this);
       setTimeout(function() {
          $this.trigger('changeIE'); 
       }, 10) 
    });
})(jQuery);

$(selector).bind($.browser.msie && $.browser.version <= 8 ? 'changeIE' : 'change', function() {
  // do whatever you want
})

Answer 14

imo परिवर्तन के बजाय क्लिक का उपयोग करता है अर्थात व्यवहार भिन्न होता है। मैं एक टाइमर (सेटटाउट) का उपयोग करके परिवर्तन घटना व्यवहार का अनुकरण करना चाहता हूं।

कुछ ऐसा है (चेतावनी - नोटपैड कोड):

if ($.browser.msie) {
  var interval = 50;
  var changeHack = 'change-hac';
  var select = $("#viewByOrg");
  select.data(changeHack) = select.val();
  var checkVal=function() {
    var oldVal = select.data(changeHack);
    var newVal = select.val();
    if (oldVal !== newVal) {
      select.data(changeHack, newVal);
      select.trigger('change')
    }
    setTimeout(changeHack, interval);
  }
  setTimeout(changeHack, interval);
}

$("#viewByOrg").change(function() {
  // Do stuff here
});

Comments

वाह ... थोड़ा भारी-भरकम, नहीं?

— ऑर्पी

Answer 15

यह कोशिश करो, यह मेरे लिए काम करता है

$("#viewByOrg")
        .attr('onChange', $.browser.msie ? "$(this).data('onChange').apply(this)" : "")
        .change( function(){if(!$.browser.msie)$(this).data('onChange').apply(this)} )
        .data('onChange',function(){alert('put your codes here')});

Answer 16

यह किसी की मदद कर सकता है: फॉर्म की आईडी से शुरू करने के बजाय, चयन आईडी को लक्षित करें और इस तरह से फॉर्म को जमा करें:

<form id='filterIt' action='' method='post'>
  <select id='val' name='val'>
    <option value='1'>One</option>
    <option value='2'>Two</option>
    <option value='6'>Six</option>
  </select>
  <input type="submit" value="go" />
</form>

और jQuery:

$('#val').change(function(){
  $('#filterIt').submit();
});

(जाहिर है, सबमिट बटन वैकल्पिक है, मामले में जावास्क्रिप्ट अक्षम है)

Answer 17

निम्नलिखित आज़माएँ:

.bind($.browser.msie ? 'click' : 'change', function(event) {

Answer 18

प्रयोग करने से बचें .focus () या .Select () से पहले .change () के समारोह jQuery IE के लिए है, तो यह ठीक काम करता है, im मेरी साइट में इसका उपयोग करने।

धन्यवाद

Answer 19

//global
var prev_value = ""; 

$(document).ready(function () {

 if (jQuery.browser.msie && $.browser.version < 8)
      $('input:not(:submit):not(:button):not(:hidden), select, textarea').bind("focus", function () { 
         prev_value = $(this).val();

       }).bind("blur", function () { 
         if($(this).val() != prev_value)
         has_changes = true;
       });
}

Answer 20

कृपया परिवर्तन / क्लिक के बजाय प्रत्येक का उपयोग करने का प्रयास करें , जो IE और साथ ही अन्य ब्राउज़रों में भी पहली बार ठीक काम कर रहा है

पहली बार काम नहीं कर रहा

$("#checkboxid").**change**(function () {

});

पहली बार में भी ठीक काम

$("#checkboxid").**each**(function () {

});