আমি কীভাবে jquery এর মাধ্যমে একটি অ্যাঙ্কর ক্লিক সিমুলেট করতে পারি?


144

JQuery এর মাধ্যমে অ্যাঙ্কর ক্লিক নকল করতে আমার একটি সমস্যা আছে: আমি যখন প্রথমবার ইনপুট বোতামটিতে ক্লিক করি তখন আমার পুরুবক্সটি কেন উপস্থিত হয়, তবে দ্বিতীয় বা তৃতীয়বার নয়?

আমার কোডটি এখানে:

<input onclick="$('#thickboxId').click();" type="button" value="Click me" />

<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

আমি যখন সরাসরি লিঙ্কটিতে ক্লিক করি তখন এটি সর্বদা কার্যকর হয়, তবে আমি যদি ইনপুট বোতামের মাধ্যমে ঘনবক্সটি সক্রিয় করার চেষ্টা করি না। এটি এফএফ-এ রয়েছে। ক্রোমের জন্য মনে হয় এটি প্রতিবার কাজ করে। কোন ইঙ্গিত?


1
আপনি এখানে কোড ছাড়ছেন। আপনি আমাদের দেখিয়েছেন অ্যাঙ্কারের জন্য ক্লিক ইভেন্টের সাথে সম্পর্কিত কোনও কোড নেই code এই কোডটি কী করে? এর সাথে কি অন্য কোনও কোড জড়িত?
ম্যাট

1
@ ম্যাট আপনি ক্লিকের পদ্ধতিটি কোনও পরামিতি ছাড়াই ব্যবহার করেন, এটি আর ইভেন্ট ইভেন্ট হিসাবে ব্যাখ্যা করা হয় না, এটি আসলে ক্লিক করবে (যেন আপনি নিজের মাউসের সাথে ক্লিক করতে পারেন) যে উপাদানটিতে শৃঙ্খলিত ছিল। এই ক্ষেত্রে, যখন ইনপুট উপাদানটি ক্লিক করা হয়, তখন আইডি 'মোটাবক্সআইডি' সহ উপাদানটিও ক্লিক করা উচিত।
কাইলফারিস

3
@ কাইলফ্যারিস: ক্লিক করা ইভেন্টটি ক্রোম বা সাফারিটিতে কাজ করে না যদি না ক্লিক করা উপাদানটির সাথে একটি অনক্লিক ইভেন্ট সংযুক্ত না থাকে এবং এখনও কেবল সেই অংশটি ট্রিগার করবে এবং href মানটিতে নেভিগেট করবে না। উপরের ক্ষেত্রে তিনি এটি একটি ট্যাগের href সম্পত্তিটিতে নেভিগেট করতে চান, যদিও ব্যবহারকারী লিঙ্কটি ক্লিক করেছেন।
সংবেদনশীল

উত্তর:


123

আপনার jQuery কলগুলিকে inুকিয়ে দেওয়া এড়াতে চেষ্টা করুন। clickইভেন্টটির সাথে আবদ্ধ হওয়ার জন্য পৃষ্ঠার শীর্ষে একটি স্ক্রিপ্ট ট্যাগ রাখুন :

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        $('#thickboxId').click();
    });
});
</script>

<input id="thickboxButton" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

সম্পাদনা:

আপনি যদি কোনও ব্যবহারকারীর লিঙ্কটি শারীরিকভাবে ক্লিক করার অনুকরণ করার চেষ্টা করছেন তবে আমি বিশ্বাস করি না এটি সম্ভব। জাভাস্ক্রিপ্টে clickপরিবর্তনটি করার জন্য বোতামের ইভেন্টটি আপডেট করা একটি কাজ হতে পারে window.location:

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        window.location = $('#thickboxId').attr('href');
    });
});
</script>

সম্পাদনা 2:

এখন যখন আমি বুঝতে পারি যে থিকবক্সটি একটি কাস্টম জিকুয়েরি ইউআই উইজেট, আমি এখানে নির্দেশাবলী পেয়েছি :

নির্দেশাবলী:

  • একটি লিঙ্ক উপাদান তৈরি করুন ( <a href>)

  • মোটাবক্সের মান ( class="thickbox") সহ লিঙ্কটিকে একটি শ্রেণির বৈশিষ্ট্য দিন

  • ইন hrefলিংক এট্রিবিউট নিম্নলিখিত নোঙ্গর যোগ করুন:#TB_inline

  • ইন hrefপর অ্যাট্রিবিউট #TB_inlineঅ্যাড নোঙ্গর করার নিম্নলিখিত কোয়েরি স্ট্রিং:

    ? উচ্চতা = 300 & প্রস্থ = 300 & inlineId = myOnPageContent

  • সেই অনুযায়ী কোয়েরিতে উচ্চতা, প্রস্থ এবং ইনলাইনআইডির মানগুলি পরিবর্তন করুন (ইনলাইনআইডি হ'ল উপাদানটির আইডি মান যা আপনি একটি থিকবক্সে দেখাতে চান এমন সামগ্রী অন্তর্ভুক্ত করে।

  • #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=truePtionচ্ছিকভাবে আপনি ক্যোরির স্ট্রিংয়ে মডেল = সত্য যুক্ত করতে পারেন (উদাঃ ) যাতে একটি থিকবক্স বন্ধ tb_remove()করার জন্য থিকবক্সের মধ্যে থেকে ফাংশনটি কল করার প্রয়োজন হবে । লুকানো মডেল সামগ্রীর উদাহরণ দেখুন, যেখানে আপনি থিকবক্স বন্ধ করতে হ্যাঁ বা নাতে ক্লিক করতে হবে।


ক্লিক হ্যান্ডলারের উইন্ডো.লোকেশনটি কাজ করে না, ততক্ষণ পুরুবাক্স প্রত্যাশার মতো কাজ করে না।
prinzdezibel

দ্বিতীয় উদাহরণে সমাধান হওয়া url না পেয়ে ব্যবহার .prop()করার পরামর্শ দেওয়া যেতে পারে attr()
কেভিন বোয়ারক্সক্স 21'14

আমি অবাক হয়েছি এটি গৃহীত উত্তর। ক্লিক ট্রিগারটি কেবল নেটিভ ডিওএম উপাদান নিয়ে কাজ করবে, jQuery মোড়কের উপাদানটিতে নয়। এটি @ স্টেভেনিকাস এবং মন্তব্যগুলি এবং অন্যান্য বেশ কয়েকটি এসও পোস্টে আলোচনা করা হয়েছে। উত্তরটি স্টেভানিকাসের পরিবর্তিত করা উচিত।
অলিভার

@ স্কোল্লি - এটি আপনার পছন্দসই নির্ভুলতায় সম্পাদনা করতে নির্দ্বিধায়
জন রাশ

3
আমি বোঝাতে চাইছিলাম যে গৃহীত উত্তরটি @ স্টেভানিকাসের হওয়া উচিত
অলিভার

194

আমার জন্য যা কাজ করেছিল তা হ'ল:

$('a.mylink')[0].click()

1
। অনুদান যে পরবর্তী অংশটি একটি শ্রেণীর নাম। # একটি আইডি জন্য হবে।
স্টেভেনিকাস

3
যদি কোনও focusclick
ইনপুটটির

এটি আমার পক্ষেও কাজ করে, তবে কেন এই কাজ করে? $ ('A.mylink') [0] .ক্লিক () কাজ করে তবে $ ('a.mylink')। Eq (0) .ক্লিক () না?
ক্রিসিসি

4
[0]অ্যারের প্রথম উপাদানটি নির্দেশ করে - একটি নির্বাচক তার সম্পাদনকালে 0 বা ততোধিক উপাদান প্রদান করে। এটি দুর্ভাগ্যজনক যে .click()এখানে সরাসরি কাজ করবে বলে মনে হয় না কারণ বাহ্যিকভাবে কাঠামোর জুড়ে নিয়মিতভাবে নির্বাচকদের উপাদান সংগ্রহের জন্য অন্যান্য অনুরোধগুলি প্রয়োগ করা হয়।
সিএফডুক

8
ব্যবহার [0]বা .get(0)একই। এগুলি jQuery সংস্করণের পরিবর্তে এলিমেন্টের DOM সংস্করণ ব্যবহার করে। .click()এই ক্ষেত্রে ফাংশন jQuery এর ক্লিকের ঘটনা কিন্তু নেটিভ এক নয়।
র‌্যাডলি সুস্টায়ার

19

আমি সম্প্রতি jQuery এর মাধ্যমে মাউস ক্লিক ইভেন্টটি ট্রিগার করতে পারি তা খুঁজে পেয়েছি।

    <script type="text/javascript">
    var a = $('.path > .to > .element > a')[0];
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );
    a.dispatchEvent(e);
    </script>

1
আমি মনে করি না এটি IE তে কাজ করে, কমপক্ষে 7 বা 8 নয়, কারণ এখানে নথিতে কোনও ক্রিয়েভেন্ট পদ্ধতি নেই।
জেরেমি

যেমন agগল বলেছেন, এটি ওয়েবকিট ব্রাউজারগুলিতে কাজ করে। তবে মনে রাখবেন আপনি এখানে jQuery ব্যবহার করছেন না ($ নির্বাচন ব্যতীত)
টোকল্যান্ড

1
জাদু এই অনুপস্থিত অর্ধেক: stackoverflow.com/questions/1421584/...
daniloquio

9

এই পদ্ধতির ফায়ারফক্স, ক্রোম এবং আইই কাজ করে। আশা করি এটি কাউকে সাহায্য করবে:

var comp = document.getElementById('yourCompId');
try { //in firefox
    comp.click();
    return;
} catch(ex) {}
try { // in chrome
    if(document.createEvent) {
        var e = document.createEvent('MouseEvents');
        e.initEvent( 'click', true, true );
        comp.dispatchEvent(e);
        return;
    }
} catch(ex) {}
try { // in IE
    if(document.createEventObject) {
         var evObj = document.createEventObject();
         comp.fireEvent("onclick", evObj);
         return;
    }
} catch(ex) {}

আমার মতে ক্রস সামঞ্জস্যতার কারণে খুব সহায়ক এবং আরও ভাল বিকল্প। আমি চেষ্টা / ব্লক ধরতে সমস্ত কিছু মুড়িয়ে রাখতে পছন্দ করি না তবে আমি বুঝতে পারি এটি প্রতিটি ব্রাউজারের জন্য ক্যাসকেড প্রচেষ্টাতে করা হয়েছে।
h0r53

8

যদিও এটি খুব পুরানো প্রশ্ন তবে আমি এই কাজটি পরিচালনা করতে আরও সহজ কিছু পেয়েছি। এটি jquery প্লাগইন হয় jquery ইউআই টিম সিমুলেট নামে পরিচিত। আপনি jquery পরে এটি অন্তর্ভুক্ত করতে পারেন এবং তারপরে আপনি এর মতো কিছু করতে পারেন

<a href="http://stackoverflow.com/"></a>
$('a').simulate('click');

ক্রোম, ফায়ারফক্স, অপেরা এবং IE10 এ দুর্দান্ত কাজ করে আপনি এটি https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js থেকে ডাউনলোড করতে পারেন download


একটা মুখ্য বৈশিষ্ট্য simulate()এটি jQuery ঘটনা পাঠানো হয় এবং সেইসাথে স্থানীয় ব্রাউজার ক্রিয়ার triggering। এটি এখন সঠিক উত্তর +1
22:25

কবজির মতো কাজ করে এবং যখন ব্যবহারকারী আমার কেন্দো গ্রিডে একটি বোতামে ক্লিক করেন তখন এটি আমাকে একটি নতুন ট্যাবে পৃষ্ঠাটি খুলতে দেয়।
জন সুলি

6

প্রশ্নের শিরোনামে "কীভাবে আমি jQuery এ একটি অ্যাঙ্কর ক্লিক অনুকরণ করতে পারি?"। ঠিক আছে, আপনি "ট্রিগার" বা "ট্রিগারহ্যান্ডলার" পদ্ধতিগুলি ব্যবহার করতে পারেন, যেমন:

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/thickbox.js"></script>
<script type="text/javascript">
$(function() {
    $('#btn').click(function() {
        $('#thickboxId').triggerHandler('click');
    })
})
</script>
...
<input id="btn" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

পরীক্ষিত নয়, এই প্রকৃত স্ক্রিপ্টটি, তবে আমি আগেও আরও বেশি ব্যবহার করেছি triggerএবং তারা খুব ভাল কাজ করেছে।

আপডেট আপডেট
triggerHandler আসলে ওপি যা চায় তা করে না। আমি মনে করি 1421968 এই প্রশ্নের সর্বোত্তম উত্তর সরবরাহ করে।


5

আমি ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ কোনও উপকরণে কীভাবে ক্লিক ক্লিক করে তা দেখতে সেলেনিয়াম এপিআইয়ের পরামর্শ দেওয়ার পরামর্শ দেব:

দেখুন BrowserBot.prototype.triggerMouseEventফাংশন।


4

আমি বিশ্বাস করি আপনি ব্যবহার করতে পারেন:

$('#yourLink').bind('click', function() {
  //Do something over here
});

$('#yourLink').trigger('click');

এটি সহজেই ক্লিক ফাংশনটিতে ক্লিক না করে সহজেই ক্লিক ফাংশনটিকে ট্রিগার করবে।


2

আপনার কি অ্যাঙ্কর ক্লিক নকল করা দরকার? পুরুবাক্স সাইট থেকে:

থিকবক্সকে একটি লিঙ্ক উপাদান, ইনপুট উপাদান (সাধারণত একটি বোতাম) এবং অঞ্চল উপাদান (চিত্র মানচিত্র) থেকে আহ্বান করা যেতে পারে।

যদি তা গ্রহণযোগ্য হয় তবে এটি নিজেই ইনপুটটিতে পুরুবাক্স ক্লাস রাখার মতো সহজ হওয়া উচিত:

<input id="thickboxButton" type="button" class="thickbox" value="Click me">

যদি তা না হয় তবে আমি ফায়ারব্যাগটি ব্যবহার করার এবং অ্যাঙ্কর এলিমেন্টটির অনক্লিক পদ্ধতিতে একটি ব্রেকপয়েন্ট স্থাপন করার পরামর্শ দিচ্ছি এটি দেখার জন্য এটি কেবলমাত্র প্রথম ক্লিকে ট্রিগার হয়েছে।

সম্পাদনা:

ঠিক আছে, আমাকে নিজের জন্য চেষ্টা করতে হয়েছিল এবং আমার কোডটি Chrome এবং ফায়ারফক্স উভয় ক্ষেত্রে ঠিক ঠিক কাজ করেছিল:

<html>
<head>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>
<body>
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="thickbox.js" type="text/javascript"></script>
<input onclick="$('#thickboxId').click();" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>
</body>
</html>

উইন্ডোটি পপ আপগুলি বিবেচনা করে না যদি আমি ইনপুট বা অ্যাঙ্কর উপাদানটি ক্লিক করি। যদি উপরের কোডটি আপনার জন্য কাজ করে তবে আমি পরামর্শ দিচ্ছি যে আপনার ত্রুটি অন্য কোথাও রয়েছে এবং আপনি সমস্যাটি বিচ্ছিন্ন করার চেষ্টা করছেন।

আরেকটি সম্ভবত এটি হ'ল আমরা jquery / thickbox এর বিভিন্ন সংস্করণ ব্যবহার করছি। আমি পুরুবাক্স পৃষ্ঠাটি থেকে যা পেয়েছি তা ব্যবহার করছি - jquery 1.3.2 এবং ঘনবক্স 3.1।


হ্যাঁ, আমি এটি নকল করতে হবে এবং হ্যাঁ ক্লিক হ্যান্ডলার নিজেই কাজ করে। তবে বাস্তবে, আমি অনক্লিক ইভেন্টটি মোটেও সেট করি নি এবং এটি কাজ করে, তবে কেবল প্রথমবার। তবে মোটাবক্সে হ্যান্ডলড অনক্লিকের সাহায্যে এটি কার্যকর হবে না।
প্রিন্সদেজিবেল

আমার অভিপ্রেতটি হ'ল এটি যাচাই করা ছিল যে প্রতিবার আপনি ইনপুট উপাদানটি ক্লিক করলে অ্যাঙ্কর উপাদানটিতে অনক্লিকটি ট্রিগার হয়। ওহ, এবং আমার সম্পাদনা উপরে দেখুন।
ওয়াক্সউইং

2

আপনি jQuery এর মাধ্যমে বা এইচটিএমএল পৃষ্ঠা কোডে এমন একটি ক্রিয়া সহ একটি ফর্ম তৈরি করতে পারেন যা আপনার লিঙ্ক href অনুকরণ করে:

<a id="anchor_link" href="somepath.php">click here</a>.

var link = $('#anchor_link').attr('href');
$('body').append('<form id="new_form" action="'+link+'"></form>');
$('#new_form').submit();

এই পদ্ধতিটির ফলে কোনও অ্যাঙ্কারে ঝাঁপিয়ে পড়ার চেয়ে পুরো পৃষ্ঠাটি পুনরায় লোড হয়। অতিরিক্তভাবে, এটি "যুক্ত করে?" URL তাই পৃষ্ঠা হয়ে example.com?#test পরিবর্তে example.com # পরীক্ষা । ক্রোম এবং সাফারিতে পরীক্ষিত।
সংবেদনশীল

এফএফ এ এটি দুর্দান্তভাবে কাজ করবে। ওয়েবকিট-ব্রাউজারগুলিতে সংবেদনশীল হিসাবে বর্ণিত হিসাবে আপনি url পাবেন। তবে এটা কোন সমস্যা না, তাই না?
7:25 এ এসডিপোল্ড

2

কোনও পৃষ্ঠায় অবতরণ করার সময় একটি অ্যাঙ্করটিতে ক্লিক করার অনুকরণ করার জন্য, আমি $(document).ready.জটিল স্ক্রিনের প্রয়োজন নেই এমন স্ক্রোলটপ সম্পত্তি সঞ্জীবিত করতে jQuery ব্যবহার করেছি , এবং এটি IE 6 এবং প্রতিটি অন্যান্য ব্রাউজারে কাজ করে।


2

আপনার যদি জিকিউরি ব্যবহার করার প্রয়োজন না হয় তবে আমি নেই। এর ক্রস ব্রাউজার ফানকে নিয়ে আমার সমস্যা হয়েছিল .click()। সুতরাং আমি ব্যবহার:

eval(document.getElementById('someid').href)

দ্রুত এবং নোংরা, তবে আমার জন্য কাজ করেছে। JQuery এ এটি eval ($ ("# কিছু লোক")। attr ("href"));
mhenry1384

2

জাভাস্ক্রিপ্টে আপনি এটি করতে পারেন

function submitRequest(buttonId) {
    if (document.getElementById(buttonId) == null
            || document.getElementById(buttonId) == undefined) {
        return;
    }
    if (document.getElementById(buttonId).dispatchEvent) {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementById(buttonId).dispatchEvent(e);
    } else {
        document.getElementById(buttonId).click();
    }
}

এবং আপনি এটি ব্যবহার করতে পারেন

submitRequest("target-element-id");

1

আপনি চান যতগুলি উপাদান সহজেই "ক্লিক" করতে জুরের স্ক্রিপ্টটি ব্যবহার করে আমি এটি তৈরি করেছি।
আমি কেবল এটি 1600+ আইটেমগুলিতে গুগল রিডার ব্যবহার করেছি এবং এটি পুরোপুরি কাজ করেছে (ফায়ারফক্সে)!

var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});

আমি মনে করি না এটি IE তে কাজ করে, কমপক্ষে 7 বা 8 নয়, কারণ এখানে নথিতে কোনও ক্রিয়েভেন্ট পদ্ধতি নেই।
জেরেমি

আমি বিশ্বাস করি যে ডকুমেন্ট.ক্রেটএভেন্টঅবজেক্ট () এর পরিবর্তে আইই ব্যবহার করা উচিত, তবে আমি এটি চেষ্টা করি নি।
ফ্রিজ্যান্ট

@ বিফ্রেড.ইটি: আইআই-তে মনে createEventObjectহয় সিন্থেটিক ইভেন্ট প্রেরণের পরিবর্তে হ্যান্ডলারের কাছে কোনও ইভেন্ট অবজেক্ট তৈরি করা বেশি is আইই এর fireEventকাছাকাছি হতে পারে dispatchEventতবে এটি কেবল শ্রোতাদেরই ট্রিগার করবে - ডিফল্ট ব্রাউজার ক্রিয়াকলাপ নয়। তবে, IE এ আপনি কেবল clickপদ্ধতিটি কল করতে পারেন ।
theazureshadow

1

JQuery('#left').triggerHandler('click');ফায়ারফক্স এবং আই 7 তে কাজ করে। আমি অন্যান্য ব্রাউজারে এটি পরীক্ষা করিনি।

স্বয়ংক্রিয় ব্যবহারকারী ক্লিকগুলি ট্রিগার করতে চাইলে নিম্নলিখিতগুলি করুন:

window.setInterval(function() 
    {
        $('#left').triggerHandler('click');
    }, 1000);

1

"লুকানো ইনপুট (ফাইল) উপাদান" ক্লিক করতে এটি অ্যান্ড্রয়েড নেটিভ ব্রাউজারে কাজ করে না:

$('a#swaswararedirectlink')[0].click();

তবে এটি কাজ করে:

$("#input-file").show();
$("#input-file")[0].click();
$("#input-file").hide();

0

জিকুয়েরি ইউআই স্পিনার সহ ইউনিট পরীক্ষায় একটি 'ক্লিক' অনুকরণ করার চেষ্টা করার সময় আমি আগের উত্তরগুলির কোনও কাজ পেতে পারি না। বিশেষত, আমি ডাউন তীরটি নির্বাচন করার জন্য 'স্পিন' অনুকরণ করার চেষ্টা করছিলাম। আমি jQuery UI স্পিনার ইউনিট পরীক্ষাগুলি দেখেছি এবং তারা নিম্নলিখিত পদ্ধতিটি ব্যবহার করে, যা আমার পক্ষে কাজ করেছে:

element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.