jQuery unable to target Bootstrap button

I've been experiencing some trouble trying to attach a listener to a button I made with Bootstrap.

<button type="button" id="buttonone" class="btn btn-default btn-lg good">
  <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>' 
</button>
<script>
 $(document).ready(function(){
    $('#buttonone').on('click', function(){
        console.log("FIRED AWAY")
     })
  })
</script>

For some reason, the message doesn't show up in my console as expected.

Moreover, I'm facing issues when trying to style my button using 

.btn {

}

Why is it that neither my bootstrap component responds to the event listener nor the CSS editing?

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

It appears that the issue lies in not placing the JavaScript inside a script block, as shown below:

<script>
  $('#buttonone').on('click', function(){
      console.log("FIRED AWAY");
  });
</script>

A demo is provided in this fiddle to demonstrate the functioning of the click event and how CSS styles can be changed. It is recommended to organize your code by separating styles and JavaScript into their own files instead of embedding them directly into HTML.

http://jsfiddle.net/e6h3nd37/1/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on implementing a check all and delete function using the datatables (jquery datagrid plugin)

I am currently utilizing the Datatables jQuery plugin to manage my table rows. While it comes with a tabletools plugin that allows for a checkall function, I am wondering how I can add a custom delete button and retrieve the selected row. Fortunately, I a ...

javascriptjquerydatatables

What is the process for incorporating beforeAnimate and afterAnimate callbacks into a custom jQuery plugin?

Let's imagine I have developed a plugin: // creating the plugin (function($){ $.fn.myPlugIn = function(options){ defaults = { beforeAnimate : function(){}, afterAnimate : function(){} ...

javascriptjqueryjquery-pluginscallbackclosures

A guide on iterating through an array to extract the initial character from every string

Currently, my focus is on extracting the initial letter of each word in order to create an acronym. I have set up an array where all the capitalized words are stored, and now I need a way to extract those specific characters. To achieve this, I initially ...

javascript

Just encountered an issue stating "PrismaClient cannot run in the browser" while working with [Next.js]

My initial plan was to log all the IDs of news in my database using console. However, when I executed the code, an error occurred as shown in this image. What is the best way to address and resolve this issue? https://i.stack.imgur.com/ci8G1.png ...

javascriptnext.jsprisma

How can you efficiently update another ng-model value based on a select input in AngularJS using ng-change?

<select data-ng-init="selectedItem='previewWidth = 1920; previewHeight = 1080'" data-ng-model="selectedItem" data-ng-change="GetNewData(); {{selectedItem}}"> <option value="previewWidth = 1920; previe ...

javascripthtmlangularjstwitter-bootstrap

Exclusive to Safari: Codesandbox is experiencing difficulties retrieving data from the localhost server

Would you mind helping me out with this technical issue I'm facing? For the server/API, I am using this link. As for the mock website, it can be found at this URL. The problem is that, in my code, I'm using axios to fetch data from the locally h ...

javascriptreactjssafariaxioscodesandbox

Arrange three div elements to create a layout that is optimized for different screen sizes

Is there a way to align these 3 divs as follows: pickup on the left, phone in the middle, and delivery on the right? I've browsed through similar alignment issues on Stack Overflow, but none of the solutions seem to work for my specific code. It' ...

htmlcssalignmentcenter

Using HTML5 input pattern to permit the use of a comma separator when entering thousands

I'm currently working on creating a regular expression for an HTML5 input form that allows the comma as a separator for thousands. Here are some examples of valid input: 20 3000 4,000 600000 7,000,000 8000000 The requirements for the input are: o ...

regexhtmlformsinput

List out IP addresses in JavaScript

Is it possible to allow users to input a range of IP addresses in a specific format? 10.5.15.[22-25],10.5.16.[35-37],10.5.17.20 The desired outcome is to return an array of these IP addresses for connection checking purposes later on. 10.5.15.22 10.5.15 ...

javascriptnode.jstextrangeip-address

An element failing to submit using AJAX requests

I have a login form with an <a> element that I want to use for making a post request. However, when I'm examining the backend Django code during debugging, it seems to interpret the request method as GET instead of POST. HTML <form id= ...

javascriptjqueryajaxdjango

Unable to scroll following an ajax request

I am encountering an issue where I need to make an ajax call that populates a DIV and the content becomes as long as 2 web pages. However, I am unable to scroll unless I resize the window. How can I instruct the browser to recalculate the page content size ...

jqueryajaxscroll

Unable to pass an event parameter using my this.handleChange function in react-native

Encountering an issue with the error message "undefined is not an object (evaluating 'event.preventDefault)" It appears that I am unable to pass an event parameter to the handleChange function in my child component, which is being rendered in the par ...

javascriptreactjsreact-nativestatereact-props

When individuals discuss constructing a stack, or a full stack, in JavaScript, what exactly are they referring to and how does this concept connect with Node JS?

I recently started learning about node.js, but I'm struggling to understand its purpose. I have experience with JavaScript/jQuery and Angular, so I don't see how Node can benefit me. People keep talking about full stack JavaScript but I'm st ...

javascriptnode.js

Check out this stylish Twitter-inspired SVG text counter created with a combination of CSS and jQuery! See it in action here: https://jsfiddle.net/moss24

Looking to develop a text counter similar to Twitter that increases the width in green color up to 75%, then switches to yellow until 98%, and finally turns red if the input value is greater than or equal to 400. It should also add a "highlight" class when ...

javascriptjquerycss

The filter function in JavaScript's Array is malfunctioning on Internet Explorer version 7

My web application includes a jQuery plugin that is functioning correctly in Internet Explorer 10 and 11. However, it is not working in IE 7. Upon investigation, I discovered that the value of the filter method is showing as undefined. The line of code th ...

javascriptjqueryasp.netwebinternet-explorer-7

Difficulty establishing audio calls with Internet Explorer using PeerJS

I successfully implemented a user-to-user audio call system by following the steps outlined in this guide: The system is up and running flawlessly on my website while using Google Chrome. However, I encountered an issue when trying to connect to a user o ...

javascriptnode.jswebrtcpeerjs

What is the best way to update the content of a particular div and its associated link ID whenever the link is clicked?

I need to update the content of a div by clicking on an href link that includes an id named data. The issue I'm facing is that I can't access the id value within my script because it's passed within a function. How can I pass the data variab ...

javascriptphpjqueryajax

Ways to emphasize the currently active tabs on a navigation bar

How can I highlight the active tabs and shift it when clicking on another link? $(function() { $('.nav ul li').on('click', function() { $(this).parent().find('li.active').removeClass('active'); $(this).a ...

jqueryhtmlcss

Looking for assistance with fundamental HTML concepts

I'm struggling to make the navigation bar stretch to full height. As a beginner in HTML and CSS, I have limited knowledge about it. I have tried numerous solutions found on the internet but nothing seems to work. The styling and HTML code are provide ...

htmlcss

What could be causing my data to undergo alterations when transitioning from a frontend form submission to a backend API?

In my experience with Next.js 13 and Prisma, I encountered a peculiar issue. I had set up a basic form to collect user information for an api request. Oddly enough, when I printed the data right before sending it, everything seemed fine. However, upon arri ...

javascriptreactjstypescriptnext.jsprisma