ভাল () jQuery এ পরিবর্তন () পরিবর্তন করে না


343

আমি changeযখন একটি বোতামের সাহায্যে ইভেন্টটির মান পরিবর্তন করি তখন আমি একটি পাঠ্য বাক্সে ট্রিগার করার চেষ্টা করি , তবে এটি কার্যকর হয় না। এই কোলাহলটি পরীক্ষা করে দেখুন ।

আপনি যদি পাঠ্য বাক্সগুলিতে কিছু টাইপ করেন এবং অন্য কোথাও ক্লিক করেন changeতবে ট্রিগার হয়। তবে, আপনি বোতামটি ক্লিক করলে, পাঠ্য বাক্সের মানটি পরিবর্তিত হয়, তবে changeট্রিগার হয় না। কেন?



শিরোনাম নিজেই আমার প্রশ্নের উত্তর। । بدل () হলুদ " এ নিশ্চিত হয়েছে " দ্রষ্টব্য: জাভাস্ক্রিপ্ট ব্যবহার করে একটি ইনপুট উপাদানটির মান পরিবর্তন করা, উদাহরণস্বরূপ .val () ব্যবহার করে, ইভেন্টটিকে আটকানো হবে না ""
বব স্টেইন

আশা করি আমি খুব শীঘ্রই স্ট্যাকওভারফ্লো.com/ জিজ্ঞাসা / ১১৮73721২১ / পেরিয়ে এসেছি , আশা করি এটি কিছুটিকে সহায়তা করে।
জাইপার্ডিম্পেস্ট

উত্তর:


454

onchange ব্যবহারকারী যখন ইনপুটটিতে টাইপ করেন এবং তখন ইনপুট ফোকাস হারিয়ে ফেলেন কেবল তখনই আগুন লাগে।

আপনি onchangeমানটি সেট করার পরে ম্যানুয়ালি ইভেন্টটি কল করতে পারেন :

$("#mytext").change(); // someObject.onchange(); in standard JS

বিকল্পভাবে, আপনি ব্যবহার করে ইভেন্টটি ট্রিগার করতে পারেন :

$("#mytext").trigger("change");

18
jquery প্রসারিত এবং একটি কথায় যুক্ত করুনWWithChange ফাংশন যোগ করুন যা আপনি চান তা করবে। এটি কোনও ডিফল্ট ক্রিয়া হতে পারে না যতবার আপনি ইভেন্টটি কোনও স্বয়ংক্রিয় মান পরিবর্তন থেকে ট্রিগার করতে চান না, কেবল তখনই যখন কোনও ব্যবহারকারী উপাদানটির সাথে যোগাযোগ করে
redsquare

8
আমি এই উত্তরটি পদ্ধতিটিতে শৃঙ্খলার বিকল্পটি সম্বোধন .change()করতে সম্পাদিত দেখতে দেখতে চাই .val()
স্নেকস

19
কারণ হতে পারে যে কিছু লোক কল .val()করে .change()কারণ তারা ইনপুট বৈধতা দেয়। ট্রিগার .change()করা .val()অসীম লুপের কারণ হবে।

7
কেবলমাত্র যদি তারা এমন কিছুতে মান পরিবর্তন করে যা তাদের নিজস্ব বৈধতা ব্যর্থ করে দেয় যা নির্বোধ হবে।
দৈর্ঘ্য

3
আমি blurঅনুরূপ কিছু সম্পাদন করার বাধ্যবাধকতাটি শেষ করেছি :$('#mytext').focus().val('New text').blur();
ওয়েস জনসন

63

রেডস্কয়ারের দুর্দান্ত পরামর্শ থেকে, এটি দুর্দান্তভাবে কাজ করে:

$.fn.changeVal = function (v) {
    return this.val(v).trigger("change");
}

$("#my-input").changeVal("Tyrannosaurus Rex");

5
আপনার মোড়ানোর দরকার নেই this:return this.val(v).trigger("change");
মিঃ পলিহর্ল

27

valমূল valফাংশনে প্রক্সি দিয়ে প্রতিস্থাপন করে পরিবর্তনটি ট্রিগার করতে আপনি খুব সহজেই ফাংশনটিকে ওভাররাইড করতে পারেন ।

আপনার ডকুমেন্টের কোথাও এই কোডটি যুক্ত করুন (jQuery লোড করার পরে)

(function($){
    var originalVal = $.fn.val;
    $.fn.val = function(){
        var result =originalVal.apply(this,arguments);
        if(arguments.length>0)
            $(this).change(); // OR with custom event $(this).trigger('value-changed');
        return result;
    };
})(jQuery);

একটি কাজের উদাহরণ: এখানে

(দ্রষ্টব্য এই সবসময় আরম্ভ হবে যে changeযখনval(new_val) মানটি আসলে পরিবর্তিত হয় না এমনকি যদি ডাকা হয় এটি ))

যদি মানটি আসলে পরিবর্তিত হয় তবে আপনি যদি কেবলমাত্র এটি পরিবর্তন করতে চান তবে এটি ব্যবহার করুন:

//This will trigger "change" event when "val(new_val)" called 
//with value different than the current one
(function($){
    var originalVal = $.fn.val;
    $.fn.val = function(){
        var prev;
        if(arguments.length>0){
            prev = originalVal.apply(this,[]);
        }
        var result =originalVal.apply(this,arguments);
        if(arguments.length>0 && prev!=originalVal.apply(this,[]))
            $(this).change();  // OR with custom event $(this).trigger('value-changed')
        return result;
    };
})(jQuery);

এর জন্য সরাসরি উদাহরণ: http://jsfiddle.net/5fSmx/1/


4
হুম, অপ্রয়োজনীয় হাঁস-প্যাচিং, আমি মনে করি :- পি। Redsquare দ্বারা মন্তব্য করা হিসাবে ভাল হতে পারে , যেমন একটি ফাংশন চেয়ে আলাদা নাম দিন .val()
বিনকি

1
আপনি যদি নামটি পরিবর্তন করেন তবে আপনার বিদ্যমান কোডটি পরিবর্তন করা উচিত - এইভাবে আপনার বিদ্যমান কোডটি কাজ চালিয়ে যাবে
ইয়ারন ইউ

4
তবে তারপরে সমস্ত কোড যা সঠিক সংজ্ঞাটি মাথায় রেখে লেখা হয়েছিল .val()তা হঠাৎই পার্শ্ব-প্রতিক্রিয়া :-p উত্পাদন শুরু করবে।
বিনকি

2
এটি প্লাগইনগুলি
ত্রুটিযুক্ত করে তুলবে

1
পার্শ্ব প্রতিক্রিয়া এড়াতে, আমি উপরের মতো ভাল ফাংশনটি পরিবর্তন করেছি, তবে আমি একটি ভিন্ন ইভেন্ট ("ভাল") ট্রিগার করছি যা আমাকে বিদ্যমান কোড রাখতে দেয় তবে যখনই আমার প্রয়োজন হবে সহজেই এটি পরিচালনা করতে পারে: $ (... ) .অন ('বদল ভাল', ...)
উলু


14

কোনও মান নির্ধারণের পরে আপনাকে এটি ম্যানুয়ালি ট্রিগার করতে হবে না:

$('#mytext').change();

বা:

$('#mytext').trigger('change');

8

দেখে মনে হচ্ছে ঘটনাগুলি বুদবুদ নয়। এটা চেষ্টা কর:

$("#mybutton").click(function(){
  var oldval=$("#mytext").val();
  $("#mytext").val('Changed by button');
  var newval=$("#mytext").val();
  if (newval != oldval) {
    $("#mytext").trigger('change');
  }
});

আশা করি এটা কাজে লাগবে.

আমি $("#mytext").trigger('change')পুরানো মানটি সংরক্ষণ না করে কেবল একটি সাধারণ প্লেইন চেষ্টা করেছি এবং .changeমানটি পরিবর্তন না হলেও আগুনও ছড়িয়ে পড়েছে। এই কারণেই আমি পূর্ববর্তী মানটি সংরক্ষণ করেছিলাম এবং $("#mytext").trigger('change')কেবল যদি এটি পরিবর্তন হয় তবেই কল করেছিলাম।


আশ্চর্যরূপে এর বেশি ভোট নেই, কারণ এটি একটি এইচটিএমএল উপাদান পরিবর্তনের বর্তমান কার্যকর প্রয়োগ।
ভোলআরন

4

২০১২ সালের ফেব্রুয়ারী, .addEventListener()বর্তমানে jQuery এর সাথে কাজ করছে না .trigger()বা .change()আপনি নীচে Chrome বা ফায়ারফক্স ব্যবহার করে এটি পরীক্ষা করতে পারেন।

txt.addEventListener('input', function() {
  console.log('not called?');
})
$('#txt').val('test').trigger('input');
$('#txt').trigger('input');
$('#txt').change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt">

.dispatchEvent()পরিবর্তে আপনি ব্যবহার করতে হবে।

txt.addEventListener('input', function() {
  console.log('it works!');
})
$('#txt').val('yes')
txt.dispatchEvent(new Event('input'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="txt">


1

Https://api.jquery.com পরিবর্তন / থেকে :

changeঘটনা একটি উপাদান পাঠানো যখন তার মান পরিবর্তন করা হয়। এই ইভেন্টটি <input>উপাদান, <textarea>বাক্স এবং <select>উপাদানগুলির মধ্যে সীমাবদ্ধ । নির্বাচিত বাক্স, চেকবক্স এবং রেডিও বোতামগুলির জন্য, ব্যবহারকারী মাউস দিয়ে একটি নির্বাচন করার সময় ইভেন্টটি তাত্ক্ষণিকভাবে বরখাস্ত করা হয়, তবে অন্যান্য উপাদান ধরণের জন্য ইভেন্টটি ফোকাস হারানো অবধি স্থগিত করা হয়।


1

আমি জানি এটি একটি পুরানো থ্রেড, তবে অন্যের সন্ধানের জন্য, উপরোক্ত সমাধানগুলি সম্ভবত changeইভেন্টগুলি পরীক্ষা করার পরিবর্তে নীচের মতো ভাল নয়, inputইভেন্টগুলি দেখুন।

$("#myInput").on("input", function() {
    // Print entered value in a div box
    $("#result").text($(this).val());
});
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.